Здесь вы узнаете, как сделать выпадающий пункт меню в панели навигации при помощи CSS.
Выпадающий пункт меню в панели навигации
Как сделать выпадающий пункт меню в панели навигации
Создаем выпадающее меню, которое появляется, когда пользователь наводит курсор мыши на элемент навигационной панели.
Шаг 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">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</div>
</div>
</div>
Объяснение примера
Для активации выпадающего меню можно использовать любой элемент, например, <button>, <a> или <p>.
Чтобы создать выпадающее меню, используем контейнерный элемент (вроде элемента <div>) и добавляем внутри него ссылки.
Оборачиваем кнопку активации и само меню элементом <div>, чтобы корректно задать позицию выпадающего меню при помощи 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-family: inherit; /* Важно для вертикального выравнивания на мобильных телефонах */
margin: 0; /* Важно для вертикального выравнивания на мобильных телефонах */
}
/* Добавляем красный фон при наведении на ссылки навигационной панели */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Содержимое выпадающего меню (скрыто по умолчанию) */
.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;
}
/* Ссылки выпадающего меню */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Добавляем серый фон при наведении на ссылки выпадающего меню */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Показываем выпадающее меню при наведении */
.dropdown:hover .dropdown-content {
display: block;
}
Объяснение примера
Мы задаем стили навигационной панели и ее ссылок: фоновый цвет, отступы и т.д.
Мы задаем стили кнопки активации выпадающего меню: фоновый цвет, отступы и т.д.
Класс .dropdown это контейнер элемента с классом .dropdown-content. Так как это элемент <div>, а не <a>, мы должны задать для него обтекание, чтобы гарантировать, что он будет расположен в одном ряду с другими ссылками.
Элемент с классом .dropdown-content в действительности и содержит выпадающее меню. По умолчанию он скрыт и показывается только при наведении на кнопку активации выпадающего меню. Обратите внимание, что свойство min-width имеет значение 160px. Вы можете задавать ему любой размер по своему желанию.
Чтобы выпадающее меню выглядело как "карточка", вместо рамки (border), мы используем свойство box-shadow. Также, чтобы выпадающее меню располагалось поверх остальных элементов, мы задаем z-index.
Селектор :hover используется, чтобы показывать выпадающее меню, когда пользователь наводит курсор мыши на кнопку активации выпадающего меню.
Выпадающее меню, срабатывающее по нажатию
Пример
