كيفية انشاء قائمة منسدلة Dropdown Menu ؟


من الامور المهمة التى نقابلها دائمًا اثناء تصفح المواقع وهى القائمة المنسدلة او Dropdown Menu , سنتحدث اليوم كن كيفية بناء قائمة مثل هذه ب HTML , CSS3 فقط بدون الحاجة إلى جافا سكربت Javascript .


اللغات المستخدمة : HTML , CSS3
الصعوبة : سهل

كيفية انشاء قائمة منسدلة Dropdown Menu ؟

الخطوة رقم 1 - هيكل HTML

انشاء هيكل HTML وهو عبارة عن قائمة غير مرتبة Unordered List عن طريق التاج <ul> , ونعطيه الكلاس menu , داخل التاج <li> سنضع  Unordered List مرة اخرى  عن طريق التاج <ul> القائمة الداخلية ستكون القائمة الفرعية .

كود القائمة المنسدلة

وهذا هو خرج الكود السابق :



الخطوة رقم 2 - الهيكل العام  للقائمة ب CSS

 فى هذه الخطوة سنقوم بحذف Margin و Padding و Outline من جميع عناصر القائمة , اضافة طول وعرض ثابت للقائمة , تنعيم الحواف عن طريق Border Raduis , خلفية مدرجة فى الالوان عن طريق خاصية Gradients فى CSS3 , لمحاذاة عناصر القائمة على خط افقى واحد نحن بحاجة إلى تعويم العناصر إلى اليسار او float:left , ضبط position ل relative سنحتاجها فى محذاة القائمة الفرعية بعد قليل .

كود القائمة المنسدلة
 مؤقتًا لتسهيل العمل سنقوم باخفاء القائمة الفرعية



خرج الكود :


الخطوة رقم 3 - عمل CSS لروابط القائمة Links

 سنقوم باضافة الاكواد الاساسية مثل : font , color , padding وسوف نضيف ظل داكان عن طريق الخاصية text-shadow , انتقال ناعم بين الالوان عن الوقوف على اللنكات بالموس عن طريق الخاصية transition , لعمل فاصل بين الروابط سنستخدم الخاصية border-left , border-right ونحذف border-left من العنصر الاول ونحذف border-right من العنصر الاخير , عن Hover او الوقوف بالموس على الروابط سيتغير اللون عن طريق تغير color عن hover .

amrelarabi

خرج الكود 


الخطوة رقم 4 - القائمة الفرعية

الان إلى الخطوة الاخيرة وهى القائمة الفرعية , والتالى هى حاليا مخفية كما تتذكر من الخاصية display : none سنقوم بحذف هذا الكود لاظهارها



سنقوم بتحديد الموقع او position للقائمة الفرعية وهو 40px من الاعلى و 0px من اليسار , سنقوم بتنعيم الحواف من الاسفل , سنقوم باعطاء قيمة الشفافية opacity 0 للقائمة الفرعية وعند الوقوف على العنصر hover نقوم بتغيره هذه القيمة إلى 1 لاعطاء تأثير Fade in / out , ولاعطاء تأثير انسدال القائمة او slide down /up نقوم باعطاء height 0 وعند حالة hover تتحول إلى 36px .

سنقوم بضبط العرض للقائمة الفرعية ل 100px



الخطوة الاخيرة وهى اعطاء ايقونة مميزة لكل عنصر من عناصر القائمة كالتالى



إلى هنا تنتهى المقالة فى انشاء قائمة منسدلة ب CSS3 ودون الحاجة إلى Javascript وشكرًا

شارك الموضوع

مواضيع ذات صلة