شرح خطوات عمل قائمة منسدلة رأسية، فقط بأكواد CSS
القوائم المنسدلة من الإضافات المهمة التى لا يستغني عنها أي موقع كبير لقدرتها على إحتواء أكبر عدد من الروابط في حالة كان موقعك به العديد من الأقسام، وتقنية css تتيح لك عمل ذلك مع توافق تام للمعايير القياسية، علاوة على الإنسيابية وسهولة التعديل.
الدرس يندرج تحت فئة المتقدمين وخطوات العمل على مرحلتين كالعادة، أولاً كتابة محتويات القائمة بالأوسمة المعتادة للقوائم <ul>, <li> في xhtml ثم ثانياً تنسيقها عن طريق خصائص css المختلفة...
أولاً: تنسق أكواد XHTML..
وكتابة بنود القائمة الرئيسية، وقد سميت القائمة ul بمعرف خاص بإسم pop#.
وهذه نتيجة المعاينة
يأتي بعدها وضع بقية البنود، قائمة فرعية تابعة لكل بند من البنود الرئيسية تنسق كما يلي..
جزى الله خيرا كل من ساهم فيه
وعند المعاينة سنحصل على التالي :
لاحظ أن كل بند من البنود الرئيسية أصبح داخلة قائمة كاملة تابعة له وتحتوي داخلها على بنود القائمة الفرعية المنسدلة!
ثانياً: خصائص وأنماط CSS..
خطوة خطوة وبالترتيب حسب تسلسل الأوسمة نبدأ بكتابة الخصائص مع القائمة الرئيسية التى تأخذ المعرّف pop# والقائمة الفرعية الأخرى داخل البنود،
يمكنك الإضافة والتعديل على هذه الخصائص كما يحلو لك، هي فقط بيان للخصائص الرئيسية ولك حرية التعديل بعدها.
ولجعل القائمة أفقية ها نعدل على البنود الرئيسية والفرعية بإضافة float جهه اليمين، لاحظ أيضا في البنود الرئيسية تم تحديد موضعها بـ relative ستعرف سبب ذلك لاحقاً حتى يتم التحكم في جسم القائمة الفرعية وتحديد موضعه نسبه لهذا العنصر.
ثم الوصلات بالبنود الرئيسية ..
والوصلات داخل البنود الفرعية بالقائمة المنسدلة
القائمة الفرعية مرة أخرى وضبط الجسم وإخفائها في حالة عدم النقر على البنود الرئيسية، وتلاحظ أنه تم تحدد الموضع absolute لليمين، نسبه الى البند الرئيسي المحدد موضعه relative.
أنتهت الخصائص، والى هذا الحد القائمة تعمل بشكل سليم على جميع المتصفحات القياسية مثل Firefox, Opera, Safari بإصداراتهم وكذلك تعمل بشكل سليم على IE7
فيما عدا المتصفح التعيس IE6 فالقائمة المنسدلة الفرعية عند التأشير لا تظهر فيه الا بواسطة إضافة JavaScript كي تعمل.
بالكود التالي :
ثم في رأس الصفحة وبين الوسم <head> عرف وضع كود JavaScript التالي، أو يمكنك وضعه بملف خارجي ومن ثم ربطة بالصفحة، وهو نقلاً عن موقع Html Dog
لاحظ أن ’’pop‘‘ المبينه هنا اسم المعرّف id# للقائمة، في حالة تغييرة الى أي اسم آخر هاتغيرة من داخل كود JavaScript ايضا.
// إنتهى الشرح //
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
القوائم المنسدلة من الإضافات المهمة التى لا يستغني عنها أي موقع كبير لقدرتها على إحتواء أكبر عدد من الروابط في حالة كان موقعك به العديد من الأقسام، وتقنية css تتيح لك عمل ذلك مع توافق تام للمعايير القياسية، علاوة على الإنسيابية وسهولة التعديل.
الدرس يندرج تحت فئة المتقدمين وخطوات العمل على مرحلتين كالعادة، أولاً كتابة محتويات القائمة بالأوسمة المعتادة للقوائم <ul>, <li> في xhtml ثم ثانياً تنسيقها عن طريق خصائص css المختلفة...
أولاً: تنسق أكواد XHTML..
وكتابة بنود القائمة الرئيسية، وقد سميت القائمة ul بمعرف خاص بإسم pop#.
كود بلغة HTML:
<ul id="pop">
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
</ul>
يأتي بعدها وضع بقية البنود، قائمة فرعية تابعة لكل بند من البنود الرئيسية تنسق كما يلي..
جزى الله خيرا كل من ساهم فيه
كود بلغة HTML:
<ul id="pop">
<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>
لاحظ أن كل بند من البنود الرئيسية أصبح داخلة قائمة كاملة تابعة له وتحتوي داخلها على بنود القائمة الفرعية المنسدلة!
ثانياً: خصائص وأنماط CSS..
خطوة خطوة وبالترتيب حسب تسلسل الأوسمة نبدأ بكتابة الخصائص مع القائمة الرئيسية التى تأخذ المعرّف pop# والقائمة الفرعية الأخرى داخل البنود،
يمكنك الإضافة والتعديل على هذه الخصائص كما يحلو لك، هي فقط بيان للخصائص الرئيسية ولك حرية التعديل بعدها.
كود PHP:
/* Dropdowns Menu */
#pop, #pop li ul {
margin: 0;
padding: 0;
list-style: none;
}
كود PHP:
#pop li a, #pop li a:link, #pop li a:visited {
font: normal 12px Tahoma;
color: #414A52;
text-decoration: none;
background: #D2DDE4;
display: block;
padding: 5px 12px;
}
#pop li a:hover, #pop li a:active {
color: #FFF;
display: block;
background: #2583AD;
padding: 5px 12px;
}
كود PHP:
#pop li li a, #pop li li a:link, #pop li li a:visited {
background: #D2DDE4;
width: 175px;
margin: 0;
padding: 5px 12px;
border-top: 1px solid #FFF;
}
#pop li li a:hover, #pop li li a:active {
background: #2583AD;
}
كود PHP:
#pop li ul {
position: absolute;
width: 199px;
display: none;
right: 0;
}
#pop li:hover ul {
display: block;
}
فيما عدا المتصفح التعيس IE6 فالقائمة المنسدلة الفرعية عند التأشير لا تظهر فيه الا بواسطة إضافة JavaScript كي تعمل.
| ملاحظة : |
 تحديث !!لدعم القائمة للعمل على متصفح IE6 قم بإستبدال الكود.. وهو فى مؤخرة أكواد الـ CSS |
كود PHP:
#pop li:hover ul {
display: block;
}
كود PHP:
#pop li:hover ul, #pop li.sfhover ul {
display: block;
}
كود PHP:
<script language="JavaScript" type="text/javascript">
<!--
sfHover = function() {
if (!document.getElementsByTagName) return false;
var sfEls = document.getElementById("pop").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->
</script>
// إنتهى الشرح //
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم