السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة ويحتاجها الكثيرة منا , انها قائمة افقية ثابتة css3 لمدونات بلوجر.قائمة افقية ثابتة بتقنية css3 توضع في اعلى الصفحة تتبعك نزولا و صعودا عند عملية التتصفح. الإضافة تنزلق عند مرور الماوس لتظهر صورة لكل اسم من القائمة "Fixed Horizontal Menu Css3" .
معاينة الإضافة
كيفية اضافة قائمة افقية ثابتة css3 لمدونات بلوجر
إتبع الخطوات التالية:1- إذهب الى لوحة التحكم فى مدونتك.
2- تخطيط.
3- إضافة أداة.
4- إختر HTML/JavaScript
5- أضف الكود وأضغط حفظ.
<ul id='navigation'> <li> <a href='#'> Menu 1 </ a> </ li> <li> <a href='#'> Menu 2 </ a> </ li> <li> <a href='#'> Menu 3 </ a> </ li> <li> <a href='#'> Menu 4 </ a> </ li> <li> <a href='#'> Menu 5 </ a> </ li> <li> <a href='#'> Menu 6 </ a> </ li> <li> <a href='#'> Menu 7 </ a> </ li></ ul><style>ul # navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index: 999999; width: 735px; font: normal 11px Arial, Sans-Serif; -webkit-animation: 2s fxhompinav ease-in-out; -moz-animation: 2s fxhompinav ease-in-out; -ms-animation: 2s fxhompinav ease-in-out; animation: 2s fxhompinav ease-in-out;} ul # navigation li { width: 103px; display: inline; float: left; margin: 0 0 0 2px;} ul # navigation li a { display: block; float: left; margin-top:-78px; width: 100px; height: 22px; background-color: # 111; background-repeat: no-repeat; background-position: 50% 150px; border: 2px solid # e6e6e6; -webkit-box-shadow: 0 1px 2px rgba (0, 0, 0, 0.5); -moz-box-shadow: 0 1px 2px rgba (0, 0, 0, 0.5); box-shadow: 0 1px 2px rgba (0, 0, 0, 0.5); -moz-border-radius: 0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; border-radius: 0px 0px 10px 10px; color: # ccc; text-decoration: none; text-align: center; text-shadow: 0 1px 1px # 000; padding-top: 85px; -webkit-transition: margin-top 0.3s ease-in-out, background-position 0.4s ease-out; -moz-transition: margin-top 0.3s ease-in-out, background-position 0.4s ease-out; -o-transition: margin-top 0.3s ease-in-out, background-position 0.4s ease-out; transition: margin-top 0.3s ease-in-out, background-position 0.4s ease-out;} ul # navigation li a: hover { margin-top:-3px; background-position: 50% 10px; color: # fff; position: relative;} ul # navigation li a: hover: after { content: ""; width: 0px; height: 0px; position: absolute; top: 100%; left: 45%; margin-top:-10px; border-width: 5px; border-style: solid; border-color: transparent transparent # e6e6e6 transparent;} ul # navigation li: nth-child (1) a { }ul # navigation li: nth-child (2) a { }ul # navigation li: nth-child (3) a { }ul # navigation li: nth-child (4) a { }ul # navigation li: nth-child (5) a { }ul # navigation li: nth-child (6) a { }ul # navigation li: nth-child (7) a { } @-webkit-keyframes fxhompinav { from {margin-right:-1000px;} to {margin-right: 0px;}} @-moz-keyframes fxhompinav { from {margin-right:-1000px;} to {margin-right: 0px;}} @-ms-keyframes fxhompinav { from {margin-right:-1000px;} to {margin-right: 0px;}} @ keyframes fxhompinav { from {margin-right:-1000px;} to {margin-right: 0px;}}</ style>
تعديلات: غير كلمة Menu 7... Menu 1 باسم الصفحة و رمز # بالرابط الذي نريد ان يتم التوجيه اليه
المشاركات
0 التعليقات:
إرسال تعليق