كيف - Mega Menu
تعرف على كيفية إنشاء قائمة ضخمة (قائمة منسدلة كاملة العرض في شريط التنقل).
قائمة ميجا
إنشاء قائمة ميجا
قم بإنشاء قائمة منسدلة تظهر عندما يحرك المستخدم الماوس فوق عنصر داخل شريط التنقل.
الخطوة 1) أضف HTML:
مثال
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega
Menu</h2>
</div>
<div class="row">
<div
class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
شرح المثال
استخدم أي عنصر لفتح القائمة المنسدلة ، على سبيل المثال <button> أو <a> أو <p> عنصر.
استخدم عنصر حاوية (مثل <div class = "dropdown-content">) لإنشاء القائمة المنسدلة وإضافة شبكة (أعمدة) وإضافة روابط منسدلة داخل الشبكة.
قم بلف عنصر <div class = "dropdown"> حول الزر وعنصر الحاوية (<div class = "dropdown-content"> لوضع القائمة المنسدلة بشكل صحيح باستخدام 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: 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;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Mega Menu header, if needed */
.dropdown-content
.header {
background: red;
padding: 16px;
color: white;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column
{
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links
inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background
color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
شرح المثال
لقد صممنا شريط التنقل وروابط شريط التنقل بلون الخلفية والحشو وما إلى ذلك.
لقد صممنا زر القائمة المنسدلة بلون الخلفية والحشو وما إلى ذلك.
يحتوي .dropdown-content
الفصل على القائمة المنسدلة الفعلية. يتم إخفاؤه افتراضيًا ، وسيتم عرضه عند المرور فوق الماوس (انظر أدناه). يتم وضعه ليكون مرئيًا أسفل زر القائمة المنسدلة مباشرةً ، ويتم ضبط العرض على 100٪ لتغطية الشاشة بأكملها.
بدلاً من استخدام الحدود ، استخدمنا box-shadow
الخاصية لجعل القائمة المنسدلة تبدو مثل "بطاقة". نستخدم أيضًا z-index لوضع القائمة المنسدلة أمام العناصر الأخرى.
يتم :hover
استخدام المحدد لإظهار القائمة المنسدلة عندما يحرك المستخدم الماوس فوق زر القائمة المنسدلة.
تُستخدم .column
الفئات لإنشاء ثلاثة أعمدة تطفو بجانب بعضها البعض داخل القائمة المنسدلة (لإظهار فئات مختلفة).
قائمة ميجا سريعة الاستجابة
مثال
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height:
auto;
}
}
نصيحة: انتقل إلى البرنامج التعليمي لقوائم CSS المنسدلة لمعرفة المزيد حول القوائم المنسدلة.
نصيحة: انتقل إلى القوائم المنسدلة القابلة للنقر لمعرفة المزيد حول القوائم المنسدلة القابلة للنقر
نصيحة: انتقل إلى CSS Navbar Tutorial لمعرفة المزيد عن navbars.
نصيحة: انتقل إلى نظام التنقل العلوي المستجيب للتعرف على كيفية إنشاء شريط تنقل سريع الاستجابة.