تومبلايت نافبار احترافي للمنتديات - نافبار جديد احلى منتدى

  افضل المواضيع1
تومبلايت نافبار احترافي للمنتديات - نافبار جديد احلى منتدى

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

اقدم لكم كود نافبار احترافي يوضع بالهيدر overall_header

صورة للنافبار


https://i.servimg.com/u/f84/16/46/77/76/uo_ouo65.png

الكود يضاف بالنسخة الثانية بعد كلمة

{JAVASCRIPT}

الكود

الكود:


<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}
  #cssmenu{
  height:49px;
  border-radius:5px 5px 0 0;
  -moz-border-radius:5px 5px 0 0;
  -webkit-border-radius:5px 5px 0 0;
  background:#fefefe;
  background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
  background:-webkit-gradient(linear,right top,right bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));
  background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
  background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
  background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
  background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);
  border-bottom:2px solid #db000b;
  width:auto}
  #cssmenu:after,#cssmenu ul:after{
  content:'';display:block;
  clear:both}
  #cssmenu a{
  background:#fefefe;
  background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);
  background:-webkit-gradient(linear,right top,right bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));
  background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);
  background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);
  background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);
  background:linear-gradient(top,#fefefe 0%,#ececec 100%);
  color:#000;display:inline-block;
  font-family:Helvetica,Arial,Verdana,sans-serif;
  font-size:12px;
  line-height:49px;
  padding:0 20px;
  text-decoration:none}
  #cssmenu ul{
  list-style:none}
  #cssmenu > ul{float:right}
  #cssmenu > ul > li{float:right}
  #cssmenu > ul > li > a{color:#000;font-size:12px}
  #cssmenu > ul > li:hover:after{
  content:'';display:block;
  width:0;height:0;
  position:absolute;
  right:50%;bottom:0;border-right:10px solid transparent;
  border-left:10px solid transparent;
  border-bottom:10px solid #db000b;
  margin-right:-10px}
  #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}
  #cssmenu > ul > li.active:after{
  content:'';display:block;
  width:0;height:0;
  position:absolute;
  right:50%;bottom:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #db000b;margin-right:-10px}
  #cssmenu > ul > li.active > a{
  -moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  background:#ececec;
  background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-webkit-gradient(linear,right top,right bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));
  background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:linear-gradient(top,#ececec 0%,#fef ef 100%)}
  #cssmenu > ul > li:hover > a{
  background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-webkit-gradient(linear,right top,right bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));
  background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:linear-gradient(top,#ececec 0%,#fef ef 100%);
  -moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}
  #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%;right:0}
  #cssmenu .has-sub ul li{*margin-bottom:-1px}
  #cssmenu .has-sub ul li a{
  background:#db000b;border-bottom:1px dotted #ff0f1b;
  filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}
  #cssmenu .has-sub ul li:hover a{background:#a80008}
  #cssmenu .has-sub .has-sub:hover > ul{display:block}
  #cssmenu .has-sub .has-sub ul{display:none;position:absolute;right:100%;top:0}
  #cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}
  #cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}
  </style>





 <!-- customize your menus Links -->


 <div id="cssmenu">
 <ul>
  <li class="active"><a href="/"><span>الرئيسية</span></a></li>
 <li class="has-sub"><a href="#"><span>اسم القسم</span></a>
 <ul>
 <li class="has-sub"><a href="#"><span> 1قسم فرعي</span></a>
 <ul>
 <li><a href="#"><span>قسم فرعي</span></a></li>
 <li class="last"><a href="#"><span>قسم فرعي</span></a></li>
 </ul>
 </li>
 <li class="has-sub"><a href="#"><span>قسم فرعي 2</span></a>
 <ul>
 <li><a href="#"><span>قسم فرعي</span></a></li>
 <li class="last"><a href="#"><span>قسم فرعي</span></a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#"><span>اسم القسم</span></a></li>
 <li class="last"><a href="#"><span>اسم القسم</span></a></li>
 </ul>
 </div>


دمتم بخير وصحة وعافية
  افضل المواضيع2
بارك الله فيكى اختى الفاضلة



وهبة الساحر
القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها . . !!
     

  افضل المواضيع3
شششكرآ على الكود #بلآك
  


  افضل المواضيع4
كالعادة ابداع رائع 

وطرح يستحق المتابعة

شكراً لك 

بانتظار الجديد القادم
دمت بكل خير
  افضل المواضيع5
شششكرآ على الكود #بلآك
  
لاتستطيع الرد على المواضيع في هذا المنتدى