درس تصميم قائمة مسندلة بتقنية css

كان درسنا السابق على درس تصميم قائمة افقية بتقنية css ان شاء الله في هدا الدرس سنصمم قائمة مسندلة بتقنية    css بدون  استعمال  jqeury    وسنستعين ب   display block   و  none لاضهار واخفاء القائمة و    position rlolative و absolute  لتحكم بشكل القائمة واضهارها بدون مشاكل ادا كنت من محبي البساطة في التصميم بنتائج رائعة ان شاء الله ستجد ماتريد تابع لتعرف الطريقة واترككم مع الدرس 

لتحميل القائمة للمعاينة

وهده نتيجة الدرس :

للمشاهدة             لتحميل

1 – كود html :

• ننشئ div نعطيه id=nav
• نضع قائمة ul وبداخلها li وهدا سهل
• نضع داخل li قائمة ul وهي القائمة الفرعية
• واخيرا داخل القائمة الفرعية ul نضع li

وهده صورة توضيحية بما قمنا بيه : 

 

وهدا هو الكود:

<div id="nav">
 <ul>
      <li><a href="http://ar-webdesign.blogspot.com/"> دروس</a>
           <ul>
                <li><a href="http://ar-webdesign.blogspot.com/"> دروس css</a></li>
                <li><a href="http://ar-webdesign.blogspot.com/"> دروس html</a></li>
           </ul>
      </li>
      <li><a href="http://ar-webdesign.blogspot.com/"> مدونة</a></li>
      <li><a href="http://ar-webdesign.blogspot.com/"> برامج</a>
           <ul>
                 <li><a href="http://ar-webdesign.blogspot.com/"> برامج التصميم</a></li>
                 <li><a href="http://ar-webdesign.blogspot.com/"> برامج الحماية</a></li>
           </ul>
      </li>
      <li><a href="http://ar-webdesign.blogspot.com/"> من نحن</a></li>
      <li><a href="http://ar-webdesign.blogspot.com/"> تعديل</a></li>
 </ul>
</div>

 

2 – لننتقل لكود css  وشرحه خطوة خطوة :

#nav{
  margin: 0 auto;
  padding: 0;
  height: 32;
  width: 750px;
  background: #3B5997;
}

الآن قمنا بإعطاء nav ارتفاع القائمة 32px و عرضها 750px ولون الخلفية وجعلنا الابتعادين 0 مع توسيط القائمة ب auto

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-family: tahoma;
}

قمنا باعطاء القائمة الابتعادين 0 و ازلنا نقاط القائمة وحددنا نوع الخط وحجمه وللمزيد عن خاصية الخطوط في css

#nav ul  li {
  float: right;
  position: relative;
}

لقد قمنا بجعل عناصر القائمة افقية في سطر واحد وقمنا باعطاء الوضع        relative لكي لا تحصل مشاكل عند مرور الماوس على الرابط ليكون تناسق مع القائمة الفرعية

#nav ul  li a {
   color: #fff;
   text-decoration: none;
   padding: 8px;
   background: #3B5997;
   display: block;
   width: 120px;
   text-align: center;
}

قمنا بإعطاء الرابط لون الأبيض و أزلنا الخط تحت الرابط والابتعاد الداخلي اعطيناه 8px وأعطينا للخلفية لون وأعطيناه   display: block  ;    لكي تظهر الروابط بدون مشاكل وأعطيناها عرضا تم جعلنا الرابط في الوسط

#nav ul li ul{
   display: none;
   margin: 0;
   padding: 0;
   position: absolute;
   background: #fff;
   border: 1px solid #3B5997;
   border-top: 1px solid #fff;
}

اعطيناه display: none; لاخفاء القائمة الفرعية  اي عدم ظهور والابتعادين جعلناها صفر واعطيناها الوضع   absolute    لكي تضهر تحت العنصر li     بدون اي مشاكل أى ثابتة لا تتحرك واعطيناه اطار بسمك 1px وجعلناه   solid   واعطيناه نفس لون خلفية القائمة والباقي لايحتاج لشرح

#nav li:hover ul{
    display: block;
}

الان عند مرور الماوس على عنصر  li    ستضهر القائمة الفرعية ودالك باعطائه   display: block;

#nav li ul li a{
    color:#463C47;
    background: #fff;
    border-bottom: 1px solid #DCDDE1;
    margin: 0;
    padding: 8px;
    text-align:right;
    width: 120px;
}
#nav li ul li a:hover{
    background: #EBF0F6;
    color: #36599D;
}

الان لانحتاج لشرح ما قمنا به في الخطوة الاخيرة  لان كل اكواد واضحة ومشروحة

وهدا هو كود css كامل

#nav{
  margin: 0 auto;
  padding: 0;
  height: 32;
  width: 750px;
  background: #3B5997;
}
#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-family: tahoma;
}
#nav ul  li {
  float: right;
  position: relative;
}
#nav ul  li a {
   color: #fff;
   text-decoration: none;
   padding: 8px;
   background: #3B5997;
   display: block;
   width: 120px;
   text-align: center;
}
#nav ul li ul{
   display: none;
   margin: 0;
   padding: 0;
   position: absolute;
   background: #fff;
   border: 1px solid #3B5997;
   border-top: 1px solid #fff;
}
#nav li:hover ul{
    display: block;
}
#nav li ul li a{
    color:#463C47;
    background: #fff;
    border-bottom: 1px solid #DCDDE1;
    margin: 0;
    padding: 8px;
    text-align:right;
    width: 120px;
}
#nav li ul li a:hover{
    background: #EBF0F6;
    color: #36599D;
}

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

عزيزي الزائر ان كانت هناك اضافة فلتتفضل بها او ملاحضة عن الدرس لكي أتفاداها في المرة المقبلة بالتوفيق للجميع .