moslimmasri
عدد المساهمات : 864 معدل النشاط : 5449 السُمعة : 33
| موضوع: كود HTML لعمل نافبار جميل بدون تومبلايت من شرحي MoslimMasri الخميس 23 مايو 2013 - 0:53 | |
| السلام عليكم أقدم لكم كود HTML لعمل نافبار جميل جدا بدون تومبلايت .. مثال للكود - الكود:
-
<div style="position: fixed; top: 0px; right: 0px; background: black; width: 100%; color: #ECECEC; padding: 3px; z-index: 999;"> <div id='cssmenu'> <ul> <li class='active '><a href='your home'><span>الرئيسية</span></a></li> <li class='active '><a href='your forum'><span>المنتدى</span></a></li> <li class='active '><a href='your khas'><span>الرسائل الخاصة</span></a></li> <li class='active has-sub '><a href='#'><span>روابط مهمة</span></a> <ul> <li class='active '><a href='your a2daa'><span>قائمة الاعضاء</span></a></li> <li class='active '><a href='your shakhsea'><span>البيانات الشخصية</span></a></li> <li><a href='your raf2'><span>مركز الرفع</span></a></li> <li><a href='your blog'><span>المدونة</span></a></li> <li><a href='your groups'><span>المجموعات</span></a></li>
</ul> </li> <li><a href='your search'><span>ما الجديد ؟</span></a></li> <li><a href='your mawade2'><span>مواضيع لم يتم الرد عليها</span></a></li>
</ul> </div> </div> <Style> #cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a { margin: 0; padding: 0; position: relative; text-align: right; font-weight: bold; } #cssmenu { height: 49px; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; background: #141414; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0); border-bottom: 2px solid #e00f16; text-align: right; } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; text-align: right;
} #cssmenu a { background: #141414; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0); color: #ffffff; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none; text-align: right;
} #cssmenu ul { list-style: none; text-align: right;
} #cssmenu > ul { float: right; text-align: right;
} #cssmenu > ul > li { float: right; text-align: right;
} #cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #e00f16; margin-left: -10px; text-align: right;
} #cssmenu > ul > li:first-child > a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; text-align: right;
} #cssmenu > ul > li:last-child > a { border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; text-align: right;
} #cssmenu > ul > li.active > a { box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; background: #070707; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0); text-align: right;
} #cssmenu > ul > li:hover > a { background: #070707; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0); box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; text-align: right;
} #cssmenu .has-sub { z-index: 1; } #cssmenu .has-sub:hover > ul { display: block; } #cssmenu .has-sub ul { display: none; position: absolute; width: 200px; top: 100%; text-align: right;
left: 0; } #cssmenu .has-sub ul li { *margin-bottom: -1px; } #cssmenu .has-sub ul li a { background: #e00f16; border-bottom: 1px dotted #ec6f73; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; text-align: right;
} /* code brogramed by www.4egy.net*/ #cssmenu .has-sub ul li:hover a { background: #b00c11; } #cssmenu .has-sub .has-sub:hover > ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #cssmenu .has-sub .has-sub ul li a { background: #b00c11; border-bottom: 1px dotted #d06d70; text-align: right;
} #cssmenu .has-sub .has-sub ul li a:hover { background: #80090d; text-align: right;
} </style>
طريقة وضع الكود لو كنت مفعل التومبيلات تضعه فى الهيدر بعد هذه الكلمة {JAVASCRIPT} أما لو كنت غير مفعل التومبيلات فأفضل مكان له الاعلانات الخاصة ليظهر فى جميع الصفحات او العناصر المستقلة لو كنت مفعلها والآن مع الشرح : بدلا من كلمة : - اقتباس :
- your home
أكتب رابط الصفحة الرئيسية في المنتدي .. وبدلا من كلمة : - اقتباس :
- your forum
تضع رابط منتداك وليس الرئيسية .. وبدلا من كلمة : - اقتباس :
- your khas
ضع رابط الرسائل الخاصة والذي يكون مثل هذا : http://www.yourdomain/privmsg?folder=inboxوبدلا من - اقتباس :
- yourdomain
أكتب ضومين منتداك .. وبدلا من كلمة : - اقتباس :
- #
أكتب روابط مهمة وده إختياري وأفضل تسيبها .. وبدلا من كلمة : - اقتباس :
- your a2daa
أكتب رابط قائمة الأعضاء والتي مثل هذا الرابط : http://www.yourdomain/memberlistوبدلا من كلمة - اقتباس :
- yourdomain
أكتب ضومين منتداك .. وبدلا من كلمة : - اقتباس :
- your shakhsea
أكتب رابط البيانات الشخصية والذي مثل هذا : http://www.yourdomain/profile?mode=editprofileوبدلا من كلمة : - اقتباس :
- yourdomain
أكتب ضومين منتداك .. وبدلا من كلمة : - اقتباس :
- your raf2
أكتب رابط مركز الرفع الخاص بك إذا كان لديك مركز رفع .. وبدلا من كلمة : - اقتباس :
- your blog
أكتب رابط مدونتك إذا كان عندك مدونة .. وبدلا من كلمة : - اقتباس :
- your groups
أكتب رابط المجموعات والذي مثل هذا : http://www.yourdomain/groupsبدلا من كلمة : - اقتباس :
- yourdomain
أكتب ضومين منتداك .. وبدلا من كلمة : - اقتباس :
- your search
أكتب رابط صفحة ما الجديد .. وبدلا من الكلمة : - اقتباس :
- your mawade2
أكتب رابط مواضيع لم يتم الرد عليها مثل الذي علي هذا الرابط : http://www.yourdomain/search.forum?search_id=unansweredوبدلا من كلمة : - اقتباس :
- yourdomain
أكتب ضومين منتداك .. والأشياء إل هي مش عندك أو أنت ما تعرفهاش عادي مش لازم تعملها .. تحياتييييييي الشرح تم بواسطة : MoslimMasriيمنع النقل دون ذكر المصدر وإذا نقل أحد الكود دون ذكر المصدر أولا لن أسامحه .. ثانيا سأشكوه لمنتدي الدعم وهم يقبلون الشكاوي خاصة في تلك المواضيع .. بالتوفيق .. - اقتباس :
عدل سابقا من قبل (GeNeRaL) في الخميس 23 أبريل 2015 - 13:55 عدل 1 مرات (السبب : تجديد الصور) | |
|