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