كيفية إنشاء قائمة منسدلة متعددة المستويات (Multi-Level Dropdown) باستخدام HTML و CSS

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 16 سبتمبر 2024

محتوى المقال

كيفية إنشاء قائمة منسدلة متعددة المستويات (Multi-Level Dropdown) باستخدام HTML و CSS

القوائم المنسدلة متعددة المستويات هي واحدة من أفضل الطرق لتنظيم المحتوى في المواقع الكبيرة التي تحتوي على الكثير من الصفحات أو الخيارات. تتيح هذه القوائم للمستخدمين التنقل بسهولة عبر فئات فرعية من المحتوى. في هذا المقال، سنتعلم كيفية إنشاء قائمة منسدلة متعددة المستويات باستخدام 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 يوفر طريقة فعالة ومنظمة لتقديم المعلومات على موقعك. باستخدام هذه التقنية، يمكنك تحسين تجربة المستخدم وتنظيم المحتوى بشكل يسهل التنقل فيه. هذه القوائم مناسبة بشكل خاص للمواقع التي تحتوي على العديد من الفئات الفرعية أو الخيارات. نأمل أن يكون هذا المقال قد ساعدك على فهم كيفية إنشاء وتخصيص قوائم منسدلة متعددة المستويات لموقعك.

طور مهاراتك: مقالات يجب قراءتها في البرمجة

مقالات ذات صلة

كيفية بناء موقع متعدد اللغات باستخدام PHP و HTML
كيفية استخدام الوسوم الوصفية (Meta Tags) في HTML لتحسين SEO
كيفية تصحيح أخطاء JavaScript المضمنة في HTML
كيفية استخدام وسوم HTML لتحسين إمكانية الوصول (Accessibility)
استخدام CSS لتصميم صفحات HTML

البرمجة

استخدام دالة update() لتحديث محتويات القواميس في Python
تحديث البيانات في قاعدة البيانات باستخدام PHP
تحسين مستوى الأمان في PHP باستخدام توثيق الدخول الثنائي (2FA)
كيفية استخدام دالة eval() لتنفيذ النصوص البرمجية في Python
كيفية استخدام مكتبة Socket لبرمجة الشبكات في Python
إدراج عنصر في قائمة باستخدام دالة insert() في Python
التعامل مع هجمات CSRF في PHP