إعلان
تعلم الآن

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

مفهوم القوائم المنسدلة

القائمة المنسدلة ( Dropdown Menu ) عبارة عن قائمة مخفية تظهر عند تمرير الماوس فوق شيء موضوع في الصفحة. فمثلاً قد تكون القائمة المنسدلة تظهر عند النقر على نص، زر، صورة، أو تكون قائمة الموقع الرئيسية تتضمن قوائم داخلية منسدلة.

Dropdown Menu
A beautiful bird.

أساسيات بناء القائمة المنسدلة

لبناء قائمة منسدلة نحتاج عنصر يكون بمثابة حاوية لها و للعنصر الذي يظهرها حين تم تمرير الماوس فوقه و نعطيه الخاصية position: relative; لكي نستطيع تحديد مكان ظهور القائمة عند تمرير الماوس فوق العنصر.
القائمة نعطيها الخاصية position: absolute; فقط لكي تظهر تحت العنصر مباشرةً.

لجعل القائمة بالأساس مخفية نعطيها الخاصية display: none; و لجعلها تظهر عندما يكون الماوس فوق الحاوية الأساسية نعطيها الخاصية display: block; و هكذا حين يكون الماوس فوق العنصر المسؤول عن إظهار القائمة و حين يكون فوق عناصر القائمة نفسها أيضاً فإن القائمة ستظل ظاهرة.


في المثال التالي قمنا ببناء قائمة منسدلة تظهر تحت العنصر عندما يتم تمرير الماوس عليه.

مثال

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    background-color: #0d6efd;
    color: white;
    padding: 12px 18px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* جعلنا القائمة بالأساس مخفية */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    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:hover .dropdown-content {
    display: block;
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
}

.dropdown:hover .dropdown-btn {
    background-color: #0b5ed7;
}
</style>

<div class="dropdown">
    <button class="dropdown-btn">Dropdown</button>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>
        
جرب الكود

تحديد جهة ظهور القائمة المنسدلة

لتحديد مكان ظهور محتوى القائمة يمكننا استخدام الخصائص top، right، left، bottom.

في المثال التالي قمنا بجعل محتوى القائمة المنسدلة يظهر في الأسفل من الجهة اليمنى.

مثال

.dropdown-content {
    right: 0;
}
        
جرب الكود

تحديد نوع المحتوى القائمة المنسدلة

يمكنك جعل القائمة المنسدلة تحتوي ما تريده، فمثلاً يمكنك جعلها تحتوي صورة، نص عادي، جدول إلخ..

في المثال التالي قمنا ببناء قائمة منسدلة تعرض الصورة الأساسية الموضوعة فيا بشكل أكبر مع إظهار وصف للصورة أيضاً أسفل منها.

مثال

<div class="dropdown">
    <img class="dropdown-img" src="bird.jpg"/>
    <div class="dropdown-content">
        <img src="bird.jpg"/>
        <p>A beautiful bird.</p>
    </div>
</div>
        
جرب الكود

في المثال التالي قمنا ببناء قائمة منسدلة بداخل القائمة الرئيسية.

مثال

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li class="dropdown">
        <a href="javascript:void(0)" class="drop-btn">Submenu</a>
        <div class="dropdown-content">
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
            <a href="#">Link 5</a>
        </div>
    </li>
</ul>
        
جرب الكود

ملاحظة

وضعنا <a href="javascript:void(0)"> لجعل المتصفح يرى الرابط كأنه نص عادي حتى لا تتحدث الصفحة عند النقر عليه.


في المثال التالي قمنا ببناء قوائم منسدلة متداخلة ( Nested Menus ) بداخل القائمة الرئيسية.
هذا النوع من القوائم قد يكون صعب الفهم بشكل كامل عليك في هذه اللحظة و هذا شيء طبيعي لأنها بطبيعتها معقدة و لكن لا تقلق مع الوقت ستجدها سهلة.

مثال

<style>
nav {
    background-color: #333;
    font-family: arial;
    font-size: 14px;
}

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}

nav ul li {
	display: inline-block;
	background-color: #333;
}

nav a {
	display: block;
	padding: 0 15px;
	color: white;
	line-height: 45px;
	text-decoration: none;
}

nav a:hover { 
	background-color: cadetblue; 
}

nav ul ul {
	display: none;
	position: absolute;
	top: 45px; 	
}

nav ul li:hover > ul {
	display: inherit;
}

nav ul li:hover > a {
	background-color: cadetblue; 
}

nav ul ul li {
	width: 150px;
	float: none;
	display: list-item;
	position: relative;
	border: 1px solid #555;
}

nav ul ul ul li {
	position: relative;
	top: -45px; 
	left: 150px;
}
<style>
<nav>
    <ul>
        <li><a "javascript:void(0)">Menu ▾</a>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a "javascript:void(0)">Sub Menu ▸</a>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</nav>
        
جرب الكود
إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة