إنشاء قائمة منسدلة قابلة للطي عند التمرير باستخدام CSS
قائمة منسدلة أساسية
إنشاء صندوق منسدلة يظهر عند تحريك المستخدم للماوس فوق عنصر
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
شرح المثال
HTML
- استخدم أي عنصر لفتح محتوى القائمة المنسدلة، على سبيل المثال، عنصر
<span>(عبارة نصية مسطرة) أو عنصر<button>(زر). - استخدم عنصر حاوية مثل
<div>لإنشاء محتوى القائمة المنسدلة وأضف بداخلها العناصر التي تريد عرضها. - قم بتغليف العناصر الموجودة داخل القائمة المنسدلة باستخدام عنصر
<div>آخر لتحقيق التموضع الصحيح باستخدام CSS.
CSS
- يستخدم الصنف
.dropdownالخاصيةposition:relative، وهي ضرورية عندما نريد وضع محتوى القائمة المنسدلة أسفل زر القائمة المنسدلة مباشرةً (باستخدامposition:absolute). - الصنف
.dropdown-contentيحوي المحتوى الفعلي للقائمة المنسدلة. يكون مخفيًا بشكل افتراضي، ويظهر عند تحريك الماوس فوقه (كما هو موضح أدناه). لاحظ أنmin-widthمضبوط على 160px، ويمكنك تعديل هذه القيمة حسب الحاجة. - نصيحة: إذا كنت تريد أن يكون عرض محتوى القائمة المنسدلة مطابقًا لعرض زر القائمة المنسدلة، فعيّن
widthإلى 100% (وoverflow:autoلتمكين التمرير على الشاشات الصغيرة). - بدلًا من استخدام حد، استخدمنا خاصية
box-shadowفي CSS لإعطاء قائمة القائمة المنسدلة مظهر “بطاقة”. - يُستخدم المُحدد
:hoverلإظهار قائمة القائمة المنسدلة عندما يحرك المستخدم الماوس فوق زر القائمة المنسدلة.
قائمة منسدلة
إنشاء قائمة منسدلة تسمح للمستخدم باختيار خيار من قائمة:
قائمة منسدلة
هذا المثال مشابه للمثال السابق، باستثناء أننا نضيف روابط داخل صندوق القائمة المنسدلة ونصممها لتتناسب مع زر القائمة المنسدلة المصمم.
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
محاذاة محتوى القائمة المنسدلة لليمين
إذا كنت تريد أن تظهر قائمة القائمة المنسدلة من اليمين إلى اليسار، بدلاً من اليسار إلى اليمين، فأضف الخاصية التالية:
.dropdown-content {
right: 0;
}
المزيد من الأمثلة
صورة منسدلة
كيفية إضافة صورة ومحتوى آخر داخل صندوق القائمة المنسدلة
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.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:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>
<div class="dropdown">
<img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
<div class="dropdown-content">
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
<div class="desc">Beautiful Cinque Terre</div>
</div>
</div>
</body>
</html>إضافة قائمة منسدلة داخل شريط التنقل
يمكنك إضافة قائمة منسدلة داخل شريط التنقل باستخدام HTML و CSS. إليك الخطوات:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.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;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
