Как сделать - кнопка «Дополнительно» на панели навигации
Узнайте, как создать кнопку «Еще».
Кнопка «Дополнительно» на панели навигации
Создать выпадающую панель навигации
Создайте раскрывающееся меню, которое появляется, когда пользователь наводит указатель мыши на элемент внутри панели навигации.
Шаг 1) Добавьте HTML:
Пример
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
Объяснение примера
Используйте любой элемент, чтобы открыть раскрывающееся меню, например элемент <button>, <a> или <p>.
Используйте элемент-контейнер (например, <div>), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент <div> вокруг кнопки и <div>, чтобы правильно расположить раскрывающееся меню с помощью 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-family:
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;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
Объяснение примера
Мы стилизовали панель навигации и ссылки панели навигации с помощью цвета фона, отступов и т. д.
Мы стилизовали выпадающую кнопку с фоновым цветом, отступами и т. д.
Класс .dropdown
является контейнером для
.dropdown-content
. Поскольку это элемент <div>, а не элемент <a>, мы должны сделать его плавающим, чтобы убедиться, что он остается рядом со ссылками.
Класс .dropdown-content
содержит фактическое выпадающее меню. По умолчанию он скрыт и будет отображаться при наведении (см. ниже). Обратите внимание , что min-width
установлено значение 160px. Не стесняйтесь изменить это.
Вместо рамки мы использовали это box-shadow
свойство, чтобы выпадающее меню выглядело как «карточка». Мы также используем z-index, чтобы разместить раскрывающийся список перед другими элементами.
Селектор :hover
используется для отображения раскрывающегося меню, когда пользователь наводит указатель мыши на кнопку раскрывающегося списка.
Связанные страницы
Совет: перейдите к нашему руководству по раскрывающимся спискам CSS , чтобы узнать больше о раскрывающихся списках.
Совет. Перейдите к нашим интерактивным выпадающим спискам , чтобы узнать больше о интерактивных выпадающих списках .
Совет: перейдите к нашему руководству по CSS Navbar , чтобы узнать больше о навигационных панелях.
Совет. Перейдите к нашей адаптивной верхней панели навигации , чтобы узнать, как создать адаптивную панель навигации.