القوائم المنسدلة (Dropdowns) هي عنصر واجهة مستخدم شائع في مواقع الويب، تتيح للمستخدمين تحديد خيارات من مجموعة من العناصر. باستخدام HTML و CSS، يمكن إنشاء قوائم منسدلة بسيطة وفعالة. في هذا المقال، سنستعرض كيفية إنشاء قوائم منسدلة بأسلوبين: الأول باستخدام HTML فقط، والثاني باستخدام HTML وCSS لتنسيق القائمة المنسدلة وجعلها أكثر جاذبية.
القوائم المنسدلة باستخدام HTML
الطريقة الأولى لإنشاء قائمة منسدلة في HTML هي باستخدام عنصر <select> و<option>. هذه الطريقة مناسبة عندما تريد عرض قائمة من الخيارات التي يمكن للمستخدم اختيار واحد منها.
مثال على قائمة منسدلة بسيطة
<label for="cars">اختر سيارة:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
</select>
في هذا المثال، قمنا بإنشاء قائمة منسدلة بسيطة باستخدام عنصر <select> مع ثلاثة خيارات. يمكن للمستخدم اختيار واحدة من السيارات المدرجة في القائمة.
القوائم المنسدلة باستخدام HTML و CSS
بينما تعتبر القوائم المنسدلة التي تعتمد على HTML فقط بسيطة وسهلة الاستخدام، إلا أن إضافة CSS يمكن أن يجعلها أكثر جاذبية وتفاعلاً. سنقوم الآن بإنشاء قائمة منسدلة أكثر احترافية باستخدام HTML وCSS.
هيكل HTML لقائمة منسدلة باستخدام HTML و CSS
الخطوة الأولى هي إنشاء هيكل HTML للقائمة المنسدلة. سنستخدم عناصر <div> و<ul> و<li> لتنظيم العناصر.
<div class="dropdown">
<button class="dropbtn">اختر سيارة</button>
<div class="dropdown-content">
<a href="#volvo">Volvo</a>
<a href="#bmw">BMW</a>
<a href="#mercedes">Mercedes</a>
</div>
</div>
في هذا الكود، أنشأنا زر <button> لعرض القائمة المنسدلة، واستخدمنا عنصر <div> لاحتواء الروابط التي ستظهر عند النقر على الزر.
تنسيق القائمة المنسدلة باستخدام CSS
الآن، سنقوم بتنسيق القائمة المنسدلة لجعلها تفاعلية وجميلة باستخدام CSS. سنضيف تنسيقات لعناصر <button> و<a> داخل القائمة المنسدلة.
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
في هذا الكود، قمنا بتنسيق زر القائمة المنسدلة بحيث يكون جذابًا وسهل الاستخدام. بالإضافة إلى ذلك، تم تنسيق العناصر داخل القائمة ليتم عرضها عند تمرير المستخدم فوق الزر باستخدام خاصية hover. يتم عرض القائمة عند تمرير الفأرة فوق الزر وتختفي عند الابتعاد عنها.
شرح التفاصيل في الكود
- .dropdown: يحدد موضع القائمة المنسدلة وجعلها تظهر على هيئة كتلة.
- .dropbtn: تنسيق زر القائمة المنسدلة، مع إضافة خلفية وألوان وحجم خط مناسب.
- .dropdown-content: تحدد قائمة الروابط التي يتم إخفاؤها افتراضيًا وتظهر عند تمرير الفأرة.
- .dropdown:hover .dropdown-content: خاصية
hoverتجعل القائمة تظهر عند تمرير الفأرة فوق الزر. - .dropdown-content a:hover: تغير لون الخلفية للروابط عند تمرير الفأرة عليها، مما يضيف لمسة تفاعلية.
جعل القائمة المنسدلة متجاوبة مع الأجهزة المختلفة
لضمان أن القائمة المنسدلة تعمل بشكل جيد على الأجهزة المحمولة، يمكننا استخدام استعلامات الوسائط (Media Queries) في CSS لضبط التصميم بناءً على حجم الشاشة. على سبيل المثال، يمكننا جعل القائمة المنسدلة تظهر عموديًا على الشاشات الصغيرة.
@media only screen and (max-width: 600px) {
.dropdown-content {
min-width: 100%;
text-align: center;
}
}
يضمن هذا الكود أن القائمة المنسدلة ستأخذ عرض الشاشة بالكامل على الشاشات الصغيرة، مما يجعلها أكثر ملاءمة للأجهزة المحمولة.
الخلاصة
إنشاء قوائم منسدلة باستخدام HTML و CSS هو خطوة سهلة وفعالة لتقديم واجهة مستخدم تفاعلية ومنظمة على موقع الويب الخاص بك. باستخدام HTML فقط، يمكنك إنشاء قوائم منسدلة بسيطة، ولكن مع إضافة CSS، يمكنك تحسين التصميم وجعل القوائم أكثر جاذبية وتفاعلاً. كما يمكنك استخدام استعلامات الوسائط لجعل القوائم المنسدلة متجاوبة مع مختلف الأجهزة.