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

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


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

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

الرمز:

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

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

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

موضوع في قمة الروعه يسلمو ع الطرح الجميل

لك خالص الشكر ووافر الامتنان أخى الكريم..........
على ما بذلت من جهد وتحملت مشقة هذا
الموضوع.