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