منتدى احلى جرافيكس
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

دخول التسجيل
منتدى احلى جرافيكس

موقع لتطوير وتصميم وخدمات المواقع التابعة لشركة احلى منتدى بجميع البرامج الحديثة والمطورة



المشاركات الجديدة

menu

  • الخميس مايو 16, 2024 4:11 pm
  • الأحد مايو 12, 2024 5:24 pm
  • السبت مايو 11, 2024 11:44 pm
  • السبت مايو 11, 2024 6:34 am
  • الأربعاء مايو 08, 2024 2:11 pm
  • الخميس مايو 02, 2024 9:37 am
  • الثلاثاء أبريل 23, 2024 5:42 pm
  • الأحد أبريل 14, 2024 3:44 pm
  • الأربعاء أبريل 10, 2024 1:40 am
  • الإثنين أبريل 08, 2024 6:01 pm
  • olaabdelnabe
  • سها ياسر
  • hitmanclss
  • hitmanclss
  • olaabdelnabe
  • olaabdelnabe
  • سها ياسر
  • سها ياسر
  • دمعه السعودية
  • 乃 の り ム ム

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

more_horiz



السلام عليكم ورحمة الله تعالى وبركاته


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



صورة للكود

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

الكود:

<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}




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


عدل سابقا من قبل OuSsaMa BeDdAi في الجمعة أبريل 05, 2024 10:41 pm عدل 2 مرات (السبب : تصحيح خطأ بالكود)

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

more_horiz



شكرا لك 
كود رائع برك الله فيك

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

more_horiz



كل الشكر والامتنان لك اخي العزيز


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

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

more_horiz



بارك الله فيك على الموضوع الجميل

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

more_horiz



شـكـرا عـلى مـرورك ..

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

more_horiz



مشكووووووووور
على الكود المميز
تحياتي

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

more_horiz



شكرا لمجهودك المميز


بعد تجربة الكود :


للاسف الكود غير منسق
به عده مشاكل و لا يعمل




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

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

more_horiz



تم تعديل و تصحيح الكود من طرف  @Mc Nabulsy

والان يعمل بشكل مناسب

وفقكم الله

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

more_horiz



تم وضع معاينة لكيفية عمل الكود
اي مشكلة تواجهكم برجاء فتح موضوع هنا :  استفسارات ومشاكل

سجل دخولك أو سجل عضوية جديدة لتستفيد أكثر من المنتدى!

سجل دخولك أو سجل عضوية جديدة لتحصل على المزيد من المنتدى!

تسجيل الدخول

إذا كان لديك حساب ، الرجاء تسجيل الدخول

تسجيل الدخول
تسجيل عضوية جديدة

إنشاء حساب جديد في المنتدى مجاني تمامًا

قم بالتسجيل الآن
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
power_settings_newقم بتسجيل الدخول للرد