القوائم المنسدلة من الإضافات المهمة التى لا يستغني عنها أي موقع كبير لقدرتها على إحتواء أكبر عدد من الروابط في حالة كان موقعك به العديد من الأقسام، وتقنية 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>
<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> الرئيسية لكي تظهر القائمة أفقية و لا تبقى عمودية :padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0;
}
نهتم الان بالخصائص الخاصة بالروابط القائمة الرئيسية ، أي الخصائص التي
تعطي للقائمة شكلها الجميل و ألوانها الخلابة ، بالنسبة لي سأضع الخصائص
الخاصة بالقائمة التي تظهر في الصورة أعلاه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 مهمة أيضا كي لا يأثر ظهور القائمة الفرعية على باقي عناصر الصفحة .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;
}
#menu > ul > li > ul {
position:absolute;
top:45px; //إرتفاع القائمة
right:0;
display:none;
}
لم يبق الان سوى إضافة خصائص الـCSS الخاصة بروابط القائمة الفرعية و هي في هذا المثال كالتالي :position:absolute;
top:45px; //إرتفاع القائمة
right:0;
display:none;
}
#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;
}
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>
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>