Как сделать - Выпадающее меню в навигации
Узнать, как создать выпадающую панель навигации.
Выпадающее меню в навигации
Создать выпадающее меню в навигации
Создайте выпадающее меню, которое появляется, когда пользователь перемещает курсор мыши на элемент внутри панели навигации.
Шаг 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> вокруг кнопки и <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. Не стесняйтесь изменить это.
Вместо того, чтобы использовать границу, мы использовали свойство box-shadow
сделать выпадающее меню похожим на "карточку". Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор :hover
используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.
Кликабельно выпадающий список в навигации
Пример
Редактор кода »Совет: Зайдите на наш учебник CSS Выпадающий, чтобы узнать больше о выпадающих списках.
Совет: Зайдите на наш учебник Кликабельное выпадающее, чтобы узнать больше о выпадающем кликабельном списке
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигации.
Совет: Зайдите на наш учебник Отзывчивая верхняя навигация, чтобы узнать о том, как создать отзывчивую навигационную панель.