كيفية انشاء قائمة منسدلة 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 وشكرًا

اشترك فى القائمة البريدية

عن الكاتب

شارك على وسائل التواصل

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

واحد × ثلاثة =