اذهب الي المحتوي
أحلى نادي لأحلى أعضاء
البحث في
  • المزيد من الخيارات...
عرض النتائج التي تحتوي على:
إيجاد النتائج في:

مجموعة عامة  ·  9231 اعضاء

نادي الفهلوى ديزاين للإبداع
شموخ انثى

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

Recommended Posts

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




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

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

الكود:
<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);
      } 


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

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

شارك هذه المشاركه


رابط المشاركه
شارك


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



شارك هذه المشاركه


رابط المشاركه
شارك




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


شارك هذه المشاركه


رابط المشاركه
شارك


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

شارك هذه المشاركه


رابط المشاركه
شارك



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

p3

شارك هذه المشاركه


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

شارك هذه المشاركه


رابط المشاركه
شارك

انشئ حساب جديد او قم بتسجيل دخولك لتتمكن من اضافه تعليق جديد

يجب ان تكون عضوا لدينا لتتمكن من التعليق

انشئ حساب جديد

سجل حسابك الجديد لدينا في الموقع بمنتهي السهوله .

سجل حساب جديد

تسجيل دخول

هل تمتلك حساب بالفعل ؟ سجل دخولك من هنا.

سجل دخولك الان

×
×
  • اضف...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.