تعلم كيف تنشئ قائمة منسدلة بواسطة CSS و jQuery
مرحبا متابعي مدونة برمجة من المهم أن يكون في موقعك قائمة منسدلة افقية او عمودية خصوصا اذا كان موقعك يتوفر على العديد من روابط الاقسام او التسميات لان هذه القائمة تسمح لك بتنظيم الروابط الخاصة بالموقع وجعل التنقل بينها جيد للزوار.
أقدم لكم في هذه المقالة طريقة كيفية إنشاء قائمة منسدلة بسيطة HTML / CSS عن طريق إضافة بعض التأثيرات بلغة jQuery .
بنية القائمة HTML
ومن المعروف أن علامات HTML محجوزة بقائمة <UL> و <ol> .
ولكن بما أننا في طريقنا لإنشاء قائمة المنسدلة سوف تجد <UL> متداخلة فيما بينها عبر هيكل HTML كما يلي :
<div id="menu">
<ul>
<li><a href="langages-programmation.blogspot.com">lien principal 1</a> <!-- menu principale -->
<ul> <!-- menu secondaire -->
<li><a href="#">lien secondaire</a></li>
<li><a href="#">lien secondaire</a></li>
<li><a href="#">lien secondaire</a></li>
</ul>
</li>
<li><a href="#">lien principal 2</a>
<ul>
<li><a href="#">lien secondaire</a></li>
<li><a href="#">lien secondaire</a></li>
</ul>
</li>
<li><a href="#">lien principal 3</a>
<ul>
<li><a href="#">lien secondaire</a></li>
<li><a href="#">lien secondaire</a></li>
</ul>
</li>
<li><a href="#">lien principal 4</a>
<ul>
<li><a href="#">lien secondaire</a></li>
<li><a href="#">lien secondaire</a></li>
</ul>
</li>
<li><a href="#">lien principal 5</a>
<ul>
<li><a href="#">lien secondaire</a></li>
<li><a href="#">lien secondaire</a></li>
</ul>
</li>
</ul>
</div>
النمط CSS
أولا الهوامش والنقاط من <UL> .
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative;
}
نضيف قيمة من اليسار إلى <li> لتطفو الى علامات قائمة أفقية.
.
#menu > ul > li {
float:left;
margin:0;
padding:0;
position:relative;
}
الآن انماط روابط <A> .
يمكنك تغيير بعض الخصائص هنا لإنشاء نمط مخصص حسبك .
#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;
}
نمط القائمة الفرعية CSS هو:
يرجى ملاحظة : ان القائمة الفرعية ينبغي أن تكون غير مرئية .
#menu > ul > li > ul {
position:absolute;
top:45px;
left:0;
display:none;
}
ما تبقى هو نمط روابط <A> <li> والقائمة .
#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;
}
احداث حركة
لدينا الآن قائمة منسدلة بإضافة نص بسيط، ولكن قبل إضافة النص يجب دائما استدعاء مكتبة jQuery ، وبالتالي إضافة هذا السطر داخل <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>
لتنظيم رموز HTML و CSS و jQuery تأكد من تحميل القائمة المنسدلة بواسطة CSS و jQuery
رجـــــــــــاء : رجاءا من كل الإخوة والأخوات الكرام الذين استفادو من هذه المعلومات وبقليل من الجهد ترك تعليق أو مشاركة الموضوع عبر احدى الأزرار الثلاثة twitter أو facebook أو +google ولكم جزيل الشكر على ذالك.
No comments:
Post a Comment
ان مدونة برمجة تحتفظ بحقها في نشر او عدم نشر اي تعليق لا يستوفي شروط النشر ونشير الى ان كل ما يندرج ضمن تعليقات القرّاء لا يعبّر بأي شكل من الأشكال عن آراء الموقع وهي تلزم بمضمون كاتبها حصرياً.
يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى
شروط النشر: ان مدونة برمجة تشجّع قرّائها على المساهمة والنقاش وابداء الرأي وذلك ضمن الاطار الأخلاقي الراقي بحيث لا نسمح بالشتائم أو التجريح الشخصي أو التشهير. كما لا نسمح بكتابة كلمات بذيئة او اباحية او مهينة كما لا نسمح بالمسّ بالمعتقدات الدينية او المقدسات.
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة إعلامى او Notify me