Создание списков с выпадающими меню является важным аспектом веб-разработки, позволяющим пользователям легко ориентироваться в содержимом сайта. В этом ответе мы подробно рассмотрим, как создать такие списки с помощью HTML и CSS, а также добавим немного JavaScript для улучшения функциональности.
Шаг 1: Основная структура HTML
Для начала, создадим базовую HTML-структуру с выпадающим меню. Мы будем использовать элементы <ul> и <li> для создания списка. Вот пример:
<ul class="dropdown-menu">
<li>
<a href="#">Элемент 1</a>
<ul class="submenu">
<li><a href="#">Подэлемент 1.1</a></li>
<li><a href="#">Подэлемент 1.2</a></li>
</ul>
</li>
<li>
<a href="#">Элемент 2</a>
<ul class="submenu">
<li><a href="#">Подэлемент 2.1</a></li>
<li><a href="#">Подэлемент 2.2</a></li>
</ul>
</li>
</ul>В этом примере у нас есть основной список с двумя элементами, каждый из которых имеет подменю.
Шаг 2: Стилизация с помощью CSS
Теперь мы добавим немного CSS, чтобы стилизовать наше выпадающее меню. Мы сделаем так, чтобы подменю изначально было скрыто и отображалось только при наведении на родительский элемент.
.dropdown-menu {
list-style-type: none;
padding: 0;
margin: 0;
}
.dropdown-menu > li {
position: relative;
}
.submenu {
display: none;
position: absolute;
left: 0;
top: 100%;
list-style-type: none;
padding: 0;
margin: 0;
}
.dropdown-menu > li:hover .submenu {
display: block;
}С помощью этого CSS кода мы скрываем подменю, используя свойство display: none, и показываем его, когда пользователь наводит курсор на родительский элемент (используя :hover).
Шаг 3: Добавление JavaScript для интерактивности
Если вы хотите добавить больше интерактивности в ваше выпадающее меню, вы можете использовать JavaScript. Например, мы можем сделать так, чтобы подменю отображалось по клику, а не по наведению:
document.querySelectorAll('.dropdown-menu > li > a').forEach(item => {
item.addEventListener('click', function(event) {
event.preventDefault();
const submenu = this.nextElementSibling;
if (submenu.style.display === 'block') {
submenu.style.display = 'none';
} else {
submenu.style.display = 'block';
}
});
});Этот скрипт добавляет обработчик событий для каждого элемента меню. При клике на элемент меню, подменю будет переключаться между видимым и скрытым состоянием.
Шаг 4: Полный пример
Теперь давайте соберем все вместе. Вот полный пример кода для создания выпадающего меню:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Выпадающее меню</title>
<style>
.dropdown-menu {
list-style-type: none;
padding: 0;
margin: 0;
}
.dropdown-menu > li {
position: relative;
}
.submenu {
display: none;
position: absolute;
left: 0;
top: 100%;
list-style-type: none;
padding: 0;
margin: 0;
}
.dropdown-menu > li:hover .submenu {
display: block;
}
</style>
</head>
<body>
<ul class="dropdown-menu">
<li>
<a href="#">Элемент 1</a>
<ul class="submenu">
<li><a href="#">Подэлемент 1.1</a></li>
<li><a href="#">Подэлемент 1.2</a></li>
</ul>
</li>
<li>
<a href="#">Элемент 2</a>
<ul class="submenu">
<li><a href="#">Подэлемент 2.1</a></li>
<li><a href="#">Подэлемент 2.2</a></li>
</ul>
</li>
</ul>
<script>
document.querySelectorAll('.dropdown-menu > li > a').forEach(item => {
item.addEventListener('click', function(event) {
event.preventDefault();
const submenu = this.nextElementSibling;
if (submenu.style.display === 'block') {
submenu.style.display = 'none';
} else {
submenu.style.display = 'block';
}
});
});
</script>
</body>
</html>Теперь у вас есть полноценное выпадающее меню, которое можно настраивать и использовать на вашем сайте. Вы можете расширять и модифицировать его в зависимости от ваших нужд.
Заключение
Создание выпадающих меню может быть простым и эффективным способом улучшить навигацию на вашем сайте. С помощью вышеописанных шагов вы можете легко создать и настроить свои собственные выпадающие списки, добавляя дополнительные стили и функциональность по мере необходимости.