إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

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

| | 14 تعليق

القوائم المنسدلة من الإضافات المهمة التى لا يستغني عنها أي موقع كبير لقدرتها على إحتواء أكبر عدد من الروابط في حالة كان موقعك به العديد من الأقسام، وتقنية 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>


هذا كل شيء ، إنتهى الدرس  .
مساحة إعلانية

تعليقات بلوجر

  1. ملاحظه : تقدر تستبد كود الجي كويري وتعوضه بالCSS3 وذالك بخاصية transition: 1s , .6s;
    لأنها اخف من الجي كويري
    شكراَ لك ميد انس , موضوع جميل.

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

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

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

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

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

    ردحذف
  5. موضوع جميل وتبعان بي عاشت ايدك

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

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

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

    ردحذف
  8. <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. لقد عملت القائمة في الموقع الخاص بي وشكرا جزيلا لك لكن عندي مشكلة ارجوا حلها لقد اتى الجزء الذي لا يحتوي على وصلات مرتفع قليلا عن الوصلات وهذا هو الكود الذي استخدمته
    #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 الخاصة