Узнать, как создать раскрывающий список в боковой панели навигации используя HTML, CSS и JavaScript.
Выпадающий список в боковой навигации
Создать выпадающий список в боковой навигации
Шаг 1) Добавить HTML:
<div class="sidenav">
<a href="#about">О Нас</a>
<a href="#services">Услуги</a>
<a href="#clients">Клинты</a>
<a href="#contact">Контакт</a>
<button class="dropdown-btn">Выпадающий
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</div>
<a href="#contact">Поиск</a>
</div>Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент <button>, <a> или <p>.
Используйте элемент контейнера (например, <div>), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки. Мы будем использовать один и тот же стиль для всех ссылок внутри sidenav.
Шаг 2) Добавить CSS:
/* Фиксированный боковых навигационных ссылок, полной высоты */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Стиль боковых навигационных ссылок и раскрывающейся кнопки */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* При наведении курсора мыши */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Основное содержание */
.main {
margin-left: 200px; /* То же, что и ширина боковой навигации */
font-size: 20px; /* Увеличенный текст для включения прокрутки */
padding: 0px 10px;
}
/* Добавить активный класс для кнопки активного выпадающего списка */
.active {
background-color: green;
color: white;
}
/* Выпадающий контейнер (по умолчанию скрыт). Необязательно: добавьте более светлый цвет фона и некоторые левые отступы, чтобы изменить дизайн выпадающего содержимого */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Необязательно: стиль курсора вниз значок */
.fa-caret-down {
float: right;
padding-right: 8px;
}Попробуйте сами »Шаг 3) Добавить JavaScript:
//* Цикл через все кнопки выпадающего списка для переключения между скрытием и отображением его выпадающего содержимого - это позволяет пользователю иметь несколько выпадающих списков без каких-либо конфликтов */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}Попробуйте сами »Совет: Зайдите на наш учебник CSS Выпадающие чтобы узнать больше о выпадающих списках.
Совет: Зайдите на наш Как сделать - Кликабельный выпадающий список чтобы узнать больше о кликабельности выпадающих списков
Совет: Зайдите на наш учебник CSS Навигации чтобы узнать больше о навигации.
Совет: Зайдите на наш учебник Как сделать - Боковую панель навигации чтобы узнать о том, как создавать закрываемые боковые навигации.