القوائم المنسدلة متعددة المستويات هي واحدة من أفضل الطرق لتنظيم المحتوى في المواقع الكبيرة التي تحتوي على الكثير من الصفحات أو الخيارات. تتيح هذه القوائم للمستخدمين التنقل بسهولة عبر فئات فرعية من المحتوى. في هذا المقال، سنتعلم كيفية إنشاء قائمة منسدلة متعددة المستويات باستخدام HTML و CSS، مع شرح لكل خطوة وأمثلة توضيحية ملوّنة لتنسيقات CSS.
مقدمة حول القوائم المنسدلة
القائمة المنسدلة هي قائمة تحتوي على خيارات يمكن أن تظهر أو تختفي عند التفاعل مع عنصر معين. في حال القوائم متعددة المستويات، تحتوي القائمة على قوائم فرعية تتداخل لتوفير تجربة تنقل سلسة ومتعددة الخيارات. سنقوم أولاً بإنشاء قائمة بسيطة ثم نضيف لها مستويات متعددة باستخدام HTML و CSS.
إنشاء هيكل HTML للقائمة المنسدلة
نبدأ بإنشاء هيكل HTML الأساسي للقائمة المنسدلة. سوف نستخدم عناصر <ul> و<li> لتكوين القائمة الرئيسية والقوائم الفرعية.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>قائمة منسدلة متعددة المستويات</title>
</head>
<body>
<ul class="menu">
<li>الرئيسية</li>
<li>الخدمات
<ul class="submenu">
<li>تصميم المواقع</li>
<li>التسويق الرقمي</li>
</ul>
</li>
<li>من نحن</li>
<li>اتصل بنا</li>
</ul>
</body>
</html>
هذا هو الهيكل الأساسي للقائمة. يحتوي على قائمة رئيسية وعناصر قائمة فرعية داخل قسم “الخدمات”.
إضافة CSS لتصميم القائمة المنسدلة
الآن، سنقوم بإضافة تنسيقات CSS لتصميم القائمة وجعلها قائمة منسدلة متعددة المستويات. سنبدأ بتنسيق القائمة الأساسية، ثم نضيف التنسيقات الخاصة بالقائمة الفرعية.
تنسيق القائمة الرئيسية
في البداية، سنقوم بتنسيق القائمة الرئيسية لجعلها أفقية ومناسبة للاستخدام كقائمة تنقل.
.menu {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #333;
}
.menu > li {
display: inline-block;
position: relative;
}
.menu > li > a {
color: white;
padding: 15px 20px;
text-decoration: none;
display: block;
}
.menu > li > a:hover {
background-color: #575757;
}
في هذا الكود، نقوم بتنسيق القائمة الرئيسية لجعلها أفقية مع خلفية داكنة ونص أبيض. عند تمرير الفأرة فوق العناصر، يتغير لون الخلفية.
إضافة التنسيق للقائمة الفرعية
الآن سنقوم بتنسيق القائمة الفرعية لجعلها تظهر عند التمرير فوق العناصر الرئيسية.
.submenu {
display: none;
position: absolute;
background-color: #333;
top: 100%;
left: 0;
z-index: 1000;
}
.submenu li {
width: 200px;
}
.menu > li:hover > .submenu {
display: block;
}
في هذا الكود، نقوم بإخفاء القائمة الفرعية بشكل افتراضي ثم نظهرها عند تمرير الفأرة فوق العنصر الرئيسي. يتم وضع القائمة الفرعية تحت العنصر الرئيسي مباشرة باستخدام خاصية position.
إضافة مستوى ثالث من القوائم الفرعية
لإضافة مستوى ثالث، نقوم بتكرار نفس الخطوات مع تعديل بسيط للتنسيق. يمكن إضافة قوائم فرعية أخرى داخل القائمة الفرعية الحالية.
.submenu .submenu {
left: 100%;
top: 0;
}
في هذا الكود، نقوم بوضع القائمة الفرعية في المستوى الثالث بجانب القائمة الفرعية الأصلية. يمكن استخدام هذه التقنية لإضافة أي عدد من المستويات المطلوبة.
مثال كامل على قائمة منسدلة متعددة المستويات
الآن، سنجمع كل الأجزاء التي تعلمناها لإنشاء قائمة منسدلة متعددة المستويات كاملة باستخدام HTML و CSS:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>قائمة منسدلة متعددة المستويات</title>
<style>
.menu {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #333;
}
.menu > li {
display: inline-block;
position: relative;
}
.menu > li > a {
color: white;
padding: 15px 20px;
text-decoration: none;
display: block;
}
.menu > li > a:hover {
background-color: #575757;
}
.submenu {
display: none;
position: absolute;
background-color: #333;
top: 100%;
left: 0;
z-index: 1000;
}
.submenu li {
width: 200px;
}
.menu > li:hover > .submenu {
display: block;
}
.submenu .submenu {
left: 100%;
top: 0;
}
</style>
</head>
<body>
<ul class="menu">
<li>الرئيسية</li>
<li>الخدمات
<ul class="submenu">
<li>تصميم المواقع</li>
<li>التسويق الرقمي
<ul class="submenu">
<li>التسويق عبر البريد</li>
<li>إدارة الإعلانات</li>
</ul>
</li>
</ul>
</li>
<li>من نحن</li>
<li>اتصل بنا</li>
</ul>
</body>
</html>
هذا الكود ينشئ قائمة منسدلة متعددة المستويات بشكل كامل. يمكنك تخصيص التصميم والألوان بما يتناسب مع احتياجات موقعك.
الخلاصة
إنشاء قائمة منسدلة متعددة المستويات باستخدام HTML و CSS يوفر طريقة فعالة ومنظمة لتقديم المعلومات على موقعك. باستخدام هذه التقنية، يمكنك تحسين تجربة المستخدم وتنظيم المحتوى بشكل يسهل التنقل فيه. هذه القوائم مناسبة بشكل خاص للمواقع التي تحتوي على العديد من الفئات الفرعية أو الخيارات. نأمل أن يكون هذا المقال قد ساعدك على فهم كيفية إنشاء وتخصيص قوائم منسدلة متعددة المستويات لموقعك.