شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي

حصري ا كود نافبار رائع بدون تومبيلات ا Html

avatar

الجنس : ذكر
عدد المساهمات : 350
نقاط : 539
السٌّمعَة : 1
تاريخ الميلاد : 21/01/2004
العمر : 14
معاينة صفحة البيانات الشخصي للعضوhttp://noujom.ahlamontada.com
في الخميس يوليو 27, 2017 5:20 pm
السلام عليكم ورحمة الله تعالى وبركاته


أقدم لكم كود HTML لعمل نافبار جميل جدا بدون تومبلايت ..



صورة للكود





الكود:
[center][b][size=24]<div[/size][/b][/center]

[center][b] style="position: fixed; top: 0px; right: 0px; background: black; width:[/b][/center]

[center][b] 100%; color: #ECECEC; padding: 3px; z-index: 999;"> <div[/b][/center]

[center][b]id='cssmenu'>[/b][/center]

[center][b]<ul>[/b][/center]

[center][b]  <li class='active '><a href='your home'><span>الرئيسية</span></a></li>[/b][/center]

[center][b]  <li class='active '><a href='your forum'><span>المنتدى</span></a></li>[/b][/center]

[center][b] [/b][/center]

[center][b]<li class='active '><a[/b][/center]

[center][b]href='your khas'><span>الرسائل[/b][/center]

[center][b]الخاصة</span></a></li>[/b][/center]

[center][b]  <li class='active has-sub '><a href='#'><span>روابط مهمة</span></a>[/b][/center]

[center][b]      <ul>[/b][/center]

[center][b] [/b][/center]

[center][b]     <li class='active '><a[/b][/center]

[center][b]href='your a2daa'><span>قائمة[/b][/center]

[center][b]الاعضاء</span></a></li>[/b][/center]

[center][b]        <li[/b][/center]

[center][b]class='active '><a[/b][/center]

[center][b]href='your shakhsea'><span>البيانات[/b][/center]

[center][b] الشخصية</span></a></li>[/b][/center]

[center][b]        <li><a href='your raf2'><span>مركز الرفع</span></a></li>[/b][/center]

[center][b] [/b][/center]

[center][b]     <li><a[/b][/center]

[center][b]href='your blog'><span>المدونة</span></a></li>[/b][/center]

[center][b]      <li><a[/b][/center]

[center][b]href='your groups'><span>المجموعات</span></a></li>[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]      </ul>[/b][/center]

[center][b]  </li>[/b][/center]

[center][b] [/b][/center]

[center][b]<li><a[/b][/center]

[center][b]href='your search'><span>ما[/b][/center]

[center][b] الجديد ؟</span></a></li>[/b][/center]

[center][b]  <li><a[/b][/center]

[center][b]href='your mawade2'><span>مواضيع[/b][/center]

[center][b] لم يتم الرد عليها</span></a></li>[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]</ul>[/b][/center]

[center][b]</div>[/b][/center]

[center][b]</div>[/b][/center]

[center][b]<Style>[/b][/center]

[center][b]#cssmenu ul,[/b][/center]

[center][b]#cssmenu li,[/b][/center]

[center][b]#cssmenu span,[/b][/center]

[center][b]#cssmenu a {[/b][/center]

[center][b]  margin: 0;[/b][/center]

[center][b]  padding: 0;[/b][/center]

[center][b]  position: relative;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][b]font-weight: bold;[/b][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu {[/b][/center]

[center][b]  height: 49px;[/b][/center]

[center][b]  border-radius: 5px 5px 0 0;[/b][/center]

[center][b]  -moz-border-radius: 5px 5px 0 0;[/b][/center]

[center][b]  -webkit-border-radius: 5px 5px 0 0;[/b][/center]

[center][b]  background: #141414;[/b][/center]

[center][b]  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));[/b][/center]

[center][b]  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);[/b][/center]

[center][b]  border-bottom: 2px solid #e00f16;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu:after,[/b][/center]

[center][b]#cssmenu ul:after {[/b][/center]

[center][b]  content: '';[/b][/center]

[center][b]  display: block;[/b][/center]

[center][b]  clear: both;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu a {[/b][/center]

[center][b]  background: #141414;[/b][/center]

[center][b]  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));[/b][/center]

[center][b]  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);[/b][/center]

[center][b]  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);[/b][/center]

[center][b]  color: #ffffff;[/b][/center]

[center][b]  display: inline-block;[/b][/center]

[center][b]  font-family: Helvetica, Arial, Verdana, sans-serif;[/b][/center]

[center][b]  font-size: 12px;[/b][/center]

[center][b]  line-height: 49px;[/b][/center]

[center][b]  padding: 0 20px;[/b][/center]

[center][b]  text-decoration: none;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu ul {[/b][/center]

[center][b]  list-style: none;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu > ul {[/b][/center]

[center][b]  float: right;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu > ul > li {[/b][/center]

[center][b]  float: right;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu > ul > li:hover:after {[/b][/center]

[center][b]  content: '';[/b][/center]

[center][b]  display: block;[/b][/center]

[center][b]  width: 0;[/b][/center]

[center][b]  height: 0;[/b][/center]

[center][b]  position: absolute;[/b][/center]

[center][b]  left: 50%;[/b][/center]

[center][b]  bottom: 0;[/b][/center]

[center][b]  border-left: 10px solid transparent;[/b][/center]

[center][b]  border-right: 10px solid transparent;[/b][/center]

[center][b]  border-bottom: 10px solid #e00f16;[/b][/center]

[center][b]  margin-left: -10px;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu > ul > li:first-child > a {[/b][/center]

[center][b]  border-radius: 5px 0 0 0;[/b][/center]

[center][b]  -moz-border-radius: 5px 0 0 0;[/b][/center]

[center][b]  -webkit-border-radius: 5px 0 0 0;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu > ul > li:last-child > a {[/b][/center]

[center][b]  border-radius: 0 5px 0 0;[/b][/center]

[center][b]  -moz-border-radius: 0 5px 0 0;[/b][/center]

[center][b]  -webkit-border-radius: 0 5px 0 0;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu > ul > li.active > a {[/b][/center]

[center][b]  box-shadow: inset 0 0 3px #000000;[/b][/center]

[center][b]  -moz-box-shadow: inset 0 0 3px #000000;[/b][/center]

[center][b]  -webkit-box-shadow: inset 0 0 3px #000000;[/b][/center]

[center][b]  background: #070707;[/b][/center]

[center][b]  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));[/b][/center]

[center][b]  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu > ul > li:hover > a {[/b][/center]

[center][b]  background: #070707;[/b][/center]

[center][b]  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));[/b][/center]

[center][b]  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);[/b][/center]

[center][b]  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);[/b][/center]

[center][b]  box-shadow: inset 0 0 3px #000000;[/b][/center]

[center][b]  -moz-box-shadow: inset 0 0 3px #000000;[/b][/center]

[center][b]  -webkit-box-shadow: inset 0 0 3px #000000;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu .has-sub {[/b][/center]

[center][b]  z-index: 1;[/b][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu .has-sub:hover > ul {[/b][/center]

[center][b]  display: block;[/b][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu .has-sub ul {[/b][/center]

[center][b]  display: none;[/b][/center]

[center][b]  position: absolute;[/b][/center]

[center][b]  width: 200px;[/b][/center]

[center][b]  top: 100%;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]  left: 0;[/b][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu .has-sub ul li {[/b][/center]

[center][b]  *margin-bottom: -1px;[/b][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu .has-sub ul li a {[/b][/center]

[center][b]  background: #e00f16;[/b][/center]

[center][b]  border-bottom: 1px dotted #ec6f73;[/b][/center]

[center][b]  filter: none;[/b][/center]

[center][b]  font-size: 11px;[/b][/center]

[center][b]  display: block;[/b][/center]

[center][b]  line-height: 120%;[/b][/center]

[center][b]  padding: 10px;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]/* code brogramed by www.4egy.net*/[/b][/center]

[center][b]#cssmenu .has-sub ul li:hover a {[/b][/center]

[center][b]  background: #b00c11;[/b][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu .has-sub .has-sub:hover > ul {[/b][/center]

[center][b]  display: block;[/b][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu .has-sub .has-sub ul {[/b][/center]

[center][b]  display: none;[/b][/center]

[center][b]  position: absolute;[/b][/center]

[center][b]  left: 100%;[/b][/center]

[center][b]  top: 0;[/b][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu .has-sub .has-sub ul li a {[/b][/center]

[center][b]  background: #b00c11;[/b][/center]

[center][b]  border-bottom: 1px dotted #d06d70;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]#cssmenu .has-sub .has-sub ul li a:hover {[/b][/center]

[center][b]  background: #80090d;[/b][/center]

[center][b]text-align: right;[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]

[center][b]}[/b][/center]

[center][b]</style>[/b][/center]

[center][color=#555555][font=Courier, Courier New, sans-serif]
[/font][/color][/center]


طريقة وضع الكود



لو كنت مفعل التومبيلات

تضعه فى الهيدر بعد هذه الكلمة

{JAVASCRIPT}




أما لو كنت غير مفعل التومبيلات فأفضل مكان له الاعلانات الخاصة ليظهر فى جميع الصفحات او العناصر المستقلة لو كنت مفعلها


التوقــيـــــــــــــــــــــع




رد: حصري ا كود نافبار رائع بدون تومبيلات ا Html

avatar

الجنس : ذكر
عدد المساهمات : 150
نقاط : 166
السٌّمعَة : 0
تاريخ الميلاد : 07/05/2002
العمر : 15
معاينة صفحة البيانات الشخصي للعضو
في الخميس يوليو 27, 2017 5:45 pm
شكرا لك 
كود رائع برك الله فيك


التوقــيـــــــــــــــــــــع


رد: حصري ا كود نافبار رائع بدون تومبيلات ا Html

avatar

الجنس : ذكر
عدد المساهمات : 350
نقاط : 539
السٌّمعَة : 1
تاريخ الميلاد : 21/01/2004
العمر : 14
معاينة صفحة البيانات الشخصي للعضوhttp://noujom.ahlamontada.com
في الخميس يوليو 27, 2017 5:47 pm
كل الشكر والامتنان لك اخي العزيز


على مرورك العطر والمميز


التوقــيـــــــــــــــــــــع




رد: حصري ا كود نافبار رائع بدون تومبيلات ا Html

avatar

الجنس : ذكر
عدد المساهمات : 11
نقاط : 13
السٌّمعَة : 0
تاريخ الميلاد : 23/07/1997
العمر : 20
معاينة صفحة البيانات الشخصي للعضو
في الأحد يوليو 30, 2017 4:50 pm
بارك الله فيك على الموضوع الجميل


التوقــيـــــــــــــــــــــع


رد: حصري ا كود نافبار رائع بدون تومبيلات ا Html

avatar

الجنس : ذكر
عدد المساهمات : 350
نقاط : 539
السٌّمعَة : 1
تاريخ الميلاد : 21/01/2004
العمر : 14
معاينة صفحة البيانات الشخصي للعضوhttp://noujom.ahlamontada.com
في الثلاثاء أغسطس 01, 2017 10:38 pm
شـكـرا عـلى مـرورك ..


التوقــيـــــــــــــــــــــع




رد: حصري ا كود نافبار رائع بدون تومبيلات ا Html

avatar

عدد المساهمات : 13
نقاط : 15
السٌّمعَة : 0
تاريخ الميلاد : 28/01/1963
العمر : 55
معاينة صفحة البيانات الشخصي للعضو
في الثلاثاء أغسطس 08, 2017 7:54 pm
مشكووووووووور
على الكود المميز
تحياتي


التوقــيـــــــــــــــــــــع


استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي




اهلا بك زائرنا الكريم للتسجيل اضغط هنا قوانين نجوم احلى منتدى - تواصل مع نجوم احلى منتدى