كود نافبار جميل

[شموخ انثى 0]

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




يحتاج الى وضع كودين

الكود الاول ويوضع فى التشكيلات العامة

الكود:

<div class="menu">
  <ul>
      <li><a href="#" >Home</a></li>
      <li><a href="#" id="current">Fruit</a>
        <ul>
            <li><a href="#">Apples</a></li>
            <li><a href="#">Oranges</a></li>
            <li><a href="#">Bananas</a></li>
            <li><a href="#">Pears</a></li>
        </ul>
      </li>
      <li><a href="/about.html">About</a>
        <ul>
            <li><a href="#">Company Info</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
      </li>
      <li><a href="/contact/contact.php">Contact Us</a></li>
  </ul>
</div>

والكود الثانى يوضع فى ورقة ccs

الكود:

menu{
  border:none;
  border:0px;
  margin:0px;
  padding:0px;

  font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet
Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  font-size:14px;
  font-weight:bold;
  }
.menu ul{
  background:#F93;
  height:50px;
  list-style:none;
  margin:0;
  padding:0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
  -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
  box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
  }
  .menu li{
      float:left;
      padding:0px 0px 0px 15px;
      }
  .menu li a{
      color:#000;
      display:block;
      font-weight:normal;
      line-height:50px;
      margin:0px;
      padding:0px 25px;
      text-align:center;
      text-decoration:none;
      }
  .menu li a:hover{
      background:#C60;
      color:#FFFFFF;
      text-decoration:none;
      -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      }
  .menu ul li:hover a{
      background:#C60;
      color:#FFFFFF;
      text-decoration:none;
      }
  .menu li ul{
      display:none;
      height:auto;
      padding:0px;
      margin:0px;
      border:0px;
      position:absolute;
      width:200px;
      z-index:200;
      }
  .menu li:hover ul{
      display:block;     
      }
  .menu li li {
      display:block;
      float:none;
      margin:0px;
      padding:0px;
      width:200px;
      background:#F93;
      /*this is where the rounded corners for the dropdown disappears*/
      }
  .menu li:hover li a{
      background:none;
      }
  .menu li ul a{
      display:block;
      height:50px;
      font-size:12px;
      font-style:normal;
      margin:0px;
      padding:0px 10px 0px 15px;
      text-align:left;
      }
  .menu li ul a:hover, .menu li ul li:hover a{
      border:0px;
      color:#ffffff;
      text-decoration:none;
      background:#C60;
      -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      } 

ملاحظة / يتم التحكم فى الاسماء الموجودة فى النافبار وروابط توجيهها من خلال الكود الاول

والتحكم فى الخط والالوان من خلال الكود الثانى

[alfahloy-alfahloy 0]

●●●
!!!,.,.,., تحيه بعبق الجوري
شكر جزيلا للطرح القيم
ننتظر المزيد من الابداع من اقلامكم الرائعه
تحيتي وتقديري لكم
وددي قبل ردي .,.,.,!!


●●●

[Pr!nCe LoVeR 1]

يُسع ـدني أإلـرٍد على مـوٍأإضيعكًـم
وٍأإألتلـذذ بِمـآ قرٍأإتْ وٍشآهـدتْ
تـقبلـوٍآ خ ـآلص وَدْي وَتَقـدْيِـرِي
لآآقـلأم ـكُم أإلجمـيله
مـوٍدتـي~

[mr.mohamed 0]

تسلم علي المجهود الرائع
فى انتظار كل جديد منك
تقبلوا مرورى وتحياتى

[♥RNA♥ 0]

مشاركة رائعة
إبداع في الطرح وروعة في الإنتقاء
دمت رائع الطرح وافر العطاء
أكاليل الزهر أنثرها في صفحتك
مع خالص تحياتى وفائق تقديرى
p3

[sasa designe 0]

مشاركة ممتازه وكود روعه
تسلم هالعقل الذي وضع الموضوع
تقبلي تحياتي