[ درس ] خطوات عمل قائمة منسدلة رأسية

خطوات عمل قائمة منسدلة رأسية، فقط CSS

تابع الشرح


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

الدرس يندرج تحت فئة المتقدمين وخطوات العمل على مرحلتين كالعادة، أولاً كتابة محتويات القائمة بالأوسمة المعتادة للقوائم <ul>, في xhtml ثم ثانياً تنسيقها عن طريق خصائص css المختلفة...

أولاً: تنسق أكواد XHTML
وكتابة بنود القائمة الرئيسية، وقد سميت القائمة ul بمعرف خاص بإسم pop#.

رمز Code:

• وصلة رئيسية أفقية
• وصلة رئيسية أفقية
• وصلة رئيسية أفقية
  

يأتي بعدها وضع بقية البنود، قائمة فرعية تابعة لكل بند من البنود الرئيسية تنسق كما يلي..


رمز Code:

• وصلة رئيسية أفقية
  • وصلة رئيسية أفقية
  • وصلة رئيسية أفقية
  • وصلة رئيسية أفقية
  
  
  
  
• وصلة رئيسية أفقية
  • وصلة رئيسية أفقية
  • وصلة رئيسية أفقية
  • وصلة رئيسية أفقية
  
  
  
  
• وصلة رئيسية أفقية
  • وصلة رئيسية أفقية
  • وصلة رئيسية أفقية
  • وصلة رئيسية أفقية
  
  
  
  
  
  
  

لاحظ أن كل بند من البنود الرئيسية أصبح داخلة قائمة كاملة تابعة له وتحتوي داخلها على بنود القائمة الفرعية المنسدلة!

ثانياً: خصائص وأنماط CSS..
طوة خطوة وبالترتيب حسب تسلسل الأوسمة نبدأ بكتابة الخصائص مع القائمة الرئيسية التى تأخذ المعرّف pop# والقائمة الفرعية الأخرى داخل البنود، يمكنك الإضافة والتعديل على هذه الخصائص كما يحلو لك، هي فقط بيان للخصائص الرئيسية ولك حرية التعديل بعدها.
رمز Code:
/* Dropdowns Menu */
#pop, #pop li ul {
margin: 0;
padding: 0;
list-style: none;
}
ولجعل القائمة أفقية ها نعدل على البنود الرئيسية والفرعية بإضافة float جهه اليمين، لاحظ أيضا في البنود الرئيسية تم تحديد موضعها بـ relative ستعرف سبب ذلك لاحقاً حتى يتم التحكم في جسم القائمة الفرعية وتحديد موضعه نسبه لهذا العنصر.
رمز Code:
#pop li {
float: right;
margin: 0;
padding: 0;
position: relative;
}
#pop li li {
float: right;
width: 175px;
margin: 0;
padding: 0;
}
ثم الوصلات بالبنود الرئيسية ..

رمز Code:
#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;
}
والوصلات داخل البنود الفرعية بالقائمة المنسدلة

رمز Code:
#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;
}
القائمة الفرعية مرة أخرى وضبط الجسم وإخفائها في حالة عدم النقر على البنود الرئيسية، وتلاحظ أنه تم تحدد الموضع absolute لليمين، نسبه الى البند الرئيسي المحدد موضعه relative.
رمز Code:
#pop li ul {
position: absolute;
width: 199px;
display: none;
right: 0;
}
#pop li:hover ul {
display: block;
}
أنتهت الخصائص، والى هذا الحد القائمة تعمل بشكل سليم على جميع المتصفحات القياسية مثل Firefox, Opera, Safari بإصداراتهم وكذلك تعمل بشكل سليم على IE7 فيما عدا المتصفح التعيس IE6 فالقائمة المنسدلة الفرعية عند التأشير لا تظهر فيه الا بواسطة إضافة JavaScript كي تعمل.







أكثر...