Как сделать - Дополнительную кнопку
Узнать, дополнительную кнопку на панели навигации с помощью CSS.
Дополнительная кнопка
Создать дополнительную кнопку
Создайте выпадающее меню, которое появляется, когда пользователь перемещает курсор мыши на элемент внутри панели навигации.
Шаг 1) Добавить HTML:
Пример
<div class="navbar">
<a href="#home">Главная</a>
<a href="#news">Новости</a>
<div class="dropdown">
<button class="dropbtn">More
<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 используется position:relative, что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute).
Класс .dropdown-content содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание установлено значение min-width 160px. Не стесняйтесь изменить это.
Вместо того, чтобы использовать границу, мы использовали свойство box-shadow сделать выпадающее меню похожим на "карточку". Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор :hover используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.
Связанные страницы
Совет: Зайдите на наш учебник CSS Выпадающий, чтобы узнать больше о выпадающих списках.
Совет: Зайдите на наш учебник Кликабельный выпадающий, чтобы узнать больше о выпадающем кликабельном списке
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигации.
Совет: Зайдите на наш учебник Отзывчивая верхняя навигация, чтобы узнать о том, как создать отзывчивую навигационную панель.
