Как сделать - Мега меню
Узнать, как создать мега меню (выпадающее меню полной ширины на панели навигации).
Мега меню
Создать мега меню
Создайте выпадающее меню, которое появляется, когда пользователь перемещает курсор мыши на элемент внутри панели навигации.
Шаг 1) Добавить HTML:
Пример
<div class="navbar">
<a href="#home">Главная</a>
<a href="#news">Новости</a>
<div class="dropdown">
<button class="dropbtn">Выпадающий
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Мега меню</h2>
</div>
<div class="row">
<div class="column">
<h3>Категории 1</h3>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</div>
<div class="column">
<h3>Категории 2</h3>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</div>
<div class="column">
<h3>Категории 3</h3>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 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 {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Ссылки в панели навигации */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Выпадающий контейнер */
.dropdown {
float: left;
overflow: hidden;
}
/* Кнопка выпадающего списка */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit; /* Важно для вертикального выравнивания на мобильных телефонах */
margin: 0; /* Важно для вертикального выравнивания на мобильных телефонах */
}
/* Добавить красный цвет фона для ссылок на навигационную панель при наведении курсора */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Выпадающее содержимое (скрыто по умолчанию) */
.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;
}
/* Мега заголовок меню, если это необходимо */
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
/* Показать выпадающее меню при наведении курсора */
.dropdown:hover .dropdown-content {
display: block;
}
/* Создайте три одинаковых столбца, которые плавают рядом друг с другом */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Ссылки стиля внутри столбцов */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Добавить цвет фона при наведении курсора */
.column a:hover {
background-color: #ddd;
}
/* Очистить поплавки после столбцов */
.row:after {
content: "";
display: table;
clear: both;
}
Редактор кода »Объяснение примера
Мы стилизовали навигационную панель и ссылки на навигационную панель с фоновым цветом, заполнением и т.д.
Мы оформили кнопку выпадающего списка с фоном цвета, заполнением и т.д.
Класс .dropdown
использовать position:relative
, что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute
).
Класс .dropdown-content
содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Он расположен так, чтобы быть видимым прямо под кнопкой раскрывающегося списка, а ширина установлена на 100%, чтобы покрыть весь экран.
Вместо того, чтобы использовать границу, мы использовали свойство box-shadow
, чтобы сделать выпадающее меню похожим на "карту". Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор :hover
используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.
Классы .column
используются для создания трех столбцов, которые плавают рядом друг с другом в раскрывающемся меню (для отображения различных категорий).
Отзывчивое мега меню
Пример
/* Адаптивный макет - делает три столбца стека друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
Редактор кода »Совет: Зайдите на наш учебник CSS Выпадающий, чтобы узнать больше о выпадающих списках.
Совет: Зайдите на наш учебник Кликабельный выпадающий, чтобы узнать больше о выпадающем кликабельном списке
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигации.
Совет: Зайдите на наш учебник Отзывчивая верхняя навигация, чтобы узнать о том, как создать отзывчивую навигационную панель.