كيف - زر المزيد في Navbar
تعرف على كيفية إنشاء زر "المزيد".
زر "المزيد" في شريط التنقل
قم بإنشاء شريط التنقل المنسدلة
قم بإنشاء قائمة منسدلة تظهر عندما يحرك المستخدم الماوس فوق عنصر داخل شريط التنقل.
الخطوة 1) أضف HTML:
مثال
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
شرح المثال
استخدم أي عنصر لفتح القائمة المنسدلة ، على سبيل المثال <button> أو <a> أو <p> عنصر.
استخدم عنصر حاوية (مثل <div>) لإنشاء القائمة المنسدلة وإضافة الروابط المنسدلة بداخلها.
قم بلف عنصر <div> حول الزر و <div> لوضع القائمة المنسدلة بشكل صحيح باستخدام CSS.
الخطوة 2) أضف CSS:
مثال
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family:
inherit; /* Important for vertical align on mobile phones */
margin:
0; /* Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* 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
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
شرح المثال
لقد صممنا شريط التنقل وروابط شريط التنقل بلون الخلفية والحشو وما إلى ذلك.
لقد صممنا زر القائمة المنسدلة بلون الخلفية والحشو وما إلى ذلك.
الطبقة .dropdown
هي الحاوية ل
.dropdown-content
. نظرًا لأن هذا عنصر <div> وليس <a> عنصرًا ، فيجب علينا تعويمه للتأكد من بقائه بجوار الروابط.
يحتوي .dropdown-content
الفصل على القائمة المنسدلة الفعلية. يتم إخفاؤه افتراضيًا ، وسيتم عرضه عند المرور فوق الماوس (انظر أدناه). لاحظ أنه min-width
تم ضبطه على 160 بكسل. لا تتردد في تغيير هذا.
بدلاً من استخدام الحدود ، استخدمنا box-shadow
الخاصية لجعل القائمة المنسدلة تبدو مثل "بطاقة". نستخدم أيضًا z-index لوضع القائمة المنسدلة أمام العناصر الأخرى.
يتم :hover
استخدام المحدد لإظهار القائمة المنسدلة عندما يحرك المستخدم الماوس فوق زر القائمة المنسدلة.
الصفحات ذات الصلة
نصيحة: انتقل إلى البرنامج التعليمي لقوائم CSS المنسدلة لمعرفة المزيد حول القوائم المنسدلة.
نصيحة: انتقل إلى القوائم المنسدلة القابلة للنقر لمعرفة المزيد حول القوائم المنسدلة القابلة للنقر
نصيحة: انتقل إلى CSS Navbar Tutorial لمعرفة المزيد عن navbars.
نصيحة: انتقل إلى نظام التنقل العلوي المستجيب للتعرف على كيفية إنشاء شريط تنقل سريع الاستجابة.