Как сделать - Мега Меню
Узнайте, как создать мегаменю (раскрывающееся меню во всю ширину панели навигации).
Мега Меню
Создать Мега Меню
Создайте раскрывающееся меню, которое появляется, когда пользователь наводит указатель мыши на элемент внутри панели навигации.
Шаг 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 , чтобы узнать больше о навигационных панелях.
Совет. Перейдите к нашей адаптивной верхней панели навигации , чтобы узнать, как создать адаптивную панель навигации.