تعلم إنشاء قائمة منسدلة بتأثيرات الـCSS 3 و لغة الجي كويري


القوائم المنسدلة من الإضافات المهمة التى لا يستغني عنها أي موقع كبير لقدرتها على إحتواء أكبر عدد من الروابط في حالة كان موقعك به العديد من الأقسام، وتقنية css تتيح لك عمل ذلك مع توافق تام للمعايير القياسية، علاوة على الإنسيابية وسهولة التعديل.

يتكون الدرس من ثلاثة أجزاء أساسية ، يتعلق الجزء الأول ببنية الـHTML الخاصة بالقوائم ، و يتعلق الجزء الثاني بخصائص الـCSS التي تجعل من القوائم أفقية ، و تضيف التأثيرات اللازمة للحصول على القائمة المنسدلة ، ثم في الأخير الجزء الثالث الخاص بسكربت الجي كويري الذي يضفي الحركية إلى القائمة

تنسيق كود الـHTML الخاص بالقائمة

العنصر الخاص بالقائمة هو <ul> بداخله عناصر <li> , و العناصر <li> تحتوي بدورها على قوائم <ul> فرعية :
<div id="menu">
<ul>

<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->

  <ul>  <!-- القائمة الفرعية -->
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>

 </li>

 <li><a href="#">وصلة رئيسية</a>

  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>

 </li>

<li><a href="#">وصلة رئيسية</a> 

  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>

 </li>

</ul>
</div>

تنسيق خصائص الـCSS الخاصة بالقائمة

نقوم في الأول بتعديل عنصري <ul> بإزالة الهوامش و النقط
#menu  ul {
  padding:0;
  margin:0;
  list-style:none;
  position:relative; //مهمة
}
نضيف خاصية float بقيمة right ( اليمين ) لعناصر <li> الرئيسية لكي تظهر القائمة أفقية و لا تبقى عمودية :
#menu > ul > li {
  float:right;
  padding:0;
  margin:0;
}
نهتم الان بالخصائص الخاصة بالروابط القائمة الرئيسية ، أي الخصائص التي تعطي للقائمة شكلها الجميل و ألوانها الخلابة ، بالنسبة لي سأضع الخصائص الخاصة بالقائمة التي تظهر في الصورة أعلاه
#menu > ul > li > a {
  display:block; //مهمة
  font:normal bold 14px tahoma;
  background:#3f4040;
  min-width:100px;
  text-align:center;
  padding:10px 15px 10px 15px;
  text-decoration:none;
  color:#FFF;
  border-top:4px solid #FFF;
  border-bottom:4px solid #00B4FF;
  transition:background 500ms,color 500ms,border-color 500ms;
}
#menu > ul > li > a:hover {
  background:#666;
  border-top-color:#00B4FF;
  color:#00B4FF;
}
الان نضع الخصائص الخاصة بالقائمة الفرعية ، فهي تكون مخفية طبعا ـ لذلك نضيف لها الخاصية display بالقيمة none ، و الخاصية position التي ستأخذ القيمة absolute مهمة أيضا كي لا يأثر ظهور القائمة الفرعية على باقي عناصر الصفحة .
#menu > ul > li > ul {
  position:absolute;
  top:45px; //إرتفاع القائمة
  right:0;
  display:none;
}
لم يبق الان سوى إضافة خصائص الـCSS الخاصة بروابط القائمة الفرعية و هي في هذا المثال كالتالي :
#menu > ul > li > ul > li > a {
  background:#666;
  display:block; //مهمة
  font:normal normal 12px tahoma;
  padding:5px 10px 5px 10px;
  text-decoration:none;
  color:#FFF;
  border-bottom:1px solid #FFF;
  min-width:130px;
}
#menu > ul > li > ul > li > a:hover {
  background:#777;
}

قائمة منسدلة بدون الجي كويري

يمكننا الحصول على النتيجة النهائية دون إستخدام لغة الجي كويري و ذلك عبر إضافة خاصية CSS واحدة و هي :
#menu > ul > li:hover > ul { display:block; }
تكمن الخدعة هنا في المحددة ، إذ إن لاحظت جيدا ستجد تنسيق التحوم hover في العنصر li .

يمكننا التوقف هنا و لكننا للأسف لن نحصل على التأثير الحركي الذي يميز القوائم المنسدلة ، أي أننا عند تحويم المؤشرة فوق العناصر <li> فإننا لن نرى خروج القائمة الفرعية بشكل سلس ، بل ستخرج آنيا بدون أي تأثيرات حركية

التأثيرات الحركية بالجي كويري

عند تحويم مؤشر الفأرة فوق عناصر <li> الرئيسية تظهر القائمة الفرعية بشكل سلس .
بلغة الجي كويري نقول هذه الجملة باستخدام التابع ()hover و التأثيرات السلسة تأتي بالتوابع ()slideDown و ()slideUp .

قبل إستخدام سكربت الجي كويري يجب دائما ربط الموقع بمكتبة الجي كويري ثم بعدها نكتب سكربتاتنا ، لذلك داخل عنصر رأس الصفحة <head> نضيف ما يلي :
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
  window.onload = function(){
    $("#menu > ul > li").hover(
      function(){ $(this).find("ul").slideDown('fast'); } ,
      function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>


هذا كل شيء ، إنتهى الدرس  .
بتاريخ

هناك 11 تعليقًا:

  1. Unknown9 أغسطس 2013 في 9:50 ص

    و لو أخي ، لن تعمل أخي لأننا عند تميرير مؤشر الفأرة فوق عناصر <li> نطبق خصائص جديدة على العنصر <ul> و لهذا لا تعمل خاصية transition

    شكرا على الرد أخي

    ردحذف
  2. Unknown9 أغسطس 2013 في 2:02 م

    رغم ذلك فإنها لم تنجح ، لقد حاولت معها
    على كل حال إن كان لديك أي تطبيق فعلي للقائمة بالـCSS 3 مع جميع التأثيرات فشاركنا به

    ردحذف
  3. غير معرف14 أغسطس 2013 في 9:11 م

    شكراً لك على الموضوع القيم
    ولكن أريد تعلم لغة الـcss والجي كويري فهل يجب أن أكوان متعلم لغة أخرى لأستطيع تعلمهم؟؟؟
    .

    ردحذف
  4. دردشة صبايا العراق21 أغسطس 2013 في 3:27 م

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

    ردحذف
  5. Unknown27 أغسطس 2013 في 3:12 ص

    بعدما انهية كل شيء بقية مشكل واحد لا اعرف من اين ساكتب على الوصلة الفرعية يقول لي علك تغيير رمز الاتي "#" لا اعرف بما ساغيره

    ردحذف
    الردود
    1. Unknown27 أغسطس 2013 في 11:55 ص

      إن كنت قد إستخدمت القائمة في مدونة بلوجر فعلك بتغيير # إللا رابط ما ، إن لم ترد ذلك فيمكنك حذف الـ<li> بأكمله

      حذف
  6. غير معرف21 سبتمبر 2013 في 2:56 م

    ما تكسب ثواب طيب واعمل شرح تركيب القائمه والاكواد بتعتها

    ردحذف
  7. Mostafa Esmael6 مايو 2014 في 11:12 م

    اين اضع الكود ؟

    ردحذف
  8. غير معرف12 مايو 2014 في 4:14 م

    <table width="600" border="1" cellspacing="1" cellpadding="1">

    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>

    ردحذف
  9. غير معرف18 يونيو 2014 في 8:14 ص

    لقد عملت القائمة في الموقع الخاص بي وشكرا جزيلا لك لكن عندي مشكلة ارجوا حلها لقد اتى الجزء الذي لا يحتوي على وصلات مرتفع قليلا عن الوصلات وهذا هو الكود الذي استخدمته
    #menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;












    //مهمة
    ; background: #3f4040;
    border-bottom: 4px solid #00B4FF;
    height: 44px;
    border-top-color: #000;
    }
    وهذا هو اربط الموقع http://www.fathi.esy.es/

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة