Создание многоуровневого меню навигации: пошаговое руководство

<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link">Главная</a>
</li>
<li class="nav-item has-submenu">
<a href="#" class="nav-link">Услуги</a>
<ul class="submenu">
<li class="submenu-item">
<a href="#" class="submenu-link">Веб-разработка</a>
</li>
<li class="submenu-item has-submenu">
<a href="#" class="submenu-link">Дизайн</a>
<ul class="submenu-level-2">
<li><a href="#">UI/UX дизайн</a></li>
<li><a href="#">Графический дизайн</a></li>
</ul>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">SEO-продвижение</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">О нас</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Контакты</a>
</li>
</ul>
</nav>

<li class="nav-item has-submenu">
<a href="#" class="nav-link" aria-haspopup="true" aria-expanded="false">Услуги</a>
<ul class="submenu" aria-label="Подменю раздела Услуги">
...
</ul>
</li>

/* Основные стили для контейнера навигации */
.main-nav {
background-color: #333;
font-family: 'Arial', sans-serif;
}

/* Сбросим стандартные стили списка */
.nav-list, .submenu, .submenu-level-2 {
list-style: none;
margin: 0;
padding: 0;
}

/* Стили для основного меню */
.nav-list {
display: flex;
}

.nav-item {
position: relative;
}

.nav-link {
display: block;
color: white;
padding: 15px 20px;
text-decoration: none;
transition: background-color 0.3s;
}

.nav-link:hover {
background-color: #555;
}

/* Стили для подменю первого уровня */
.submenu {
position: absolute;
background-color: #444;
min-width: 200px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1;
}

.has-submenu:hover > .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.submenu-item {
position: relative;
}

.submenu-link {
display: block;
padding: 12px 20px;
color: white;
text-decoration: none;
transition: background-color 0.3s;
}

.submenu-link:hover {
background-color: #555;
}

/* Стили для подменю второго уровня */
.submenu-level-2 {
position: absolute;
left: 100%;
top: 0;
background-color: #555;
min-width: 180px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transform: translateX(10px);
transition: all 0.3s ease;
}

.has-submenu:hover > .submenu-level-2 {
opacity: 1;
visibility: visible;
transform: translateX(0);
}

/* Индикатор наличия подменю */
.has-submenu > .nav-link::after {
content: ' ▼';
font-size: 10px;
vertical-align: 1px;
}

/* Индикатор для подменю второго уровня (стрелка вправо) */
.has-submenu > .submenu-link::after {
content: ' ▶';
font-size: 10px;
float: right;
}

/* Подчеркивание активного пункта */
.nav-link:hover::before,
.nav-link.active::before {
content: '';
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 3px;
background-color: #ff6b6b;
}

document.addEventListener('DOMContentLoaded', function() {
const menuItems = document.querySelectorAll('.has-submenu');

// Обработка кликов по пунктам с подменю
menuItems.forEach(item => {
const link = item.querySelector('.nav-link, .submenu-link');
const submenu = item.querySelector('.submenu, .submenu-level-2');

link.addEventListener('click', function(e) {
// Предотвращаем переход по ссылке, если есть подменю
if (submenu) {
e.preventDefault();
}

// Закрываем все другие открытые подменю
menuItems.forEach(otherItem => {
if (otherItem !== item) {
const otherLink = otherItem.querySelector('.nav-link, .submenu-link');
const otherSubmenu = otherItem.querySelector('.submenu, .submenu-level-2');

if (otherSubmenu && otherSubmenu.classList.contains('active')) {
otherSubmenu.classList.remove('active');
otherLink.setAttribute('aria-expanded', 'false');
}
}
});

// Переключаем состояние текущего подменю
submenu.classList.toggle('active');

// Обновляем атрибут ARIA
const isExpanded = submenu.classList.contains('active');
link.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
});
});

// Закрытие подменю при клике вне навигации
document.addEventListener('click', function(e) {
if (!e.target.closest('.main-nav')) {
menuItems.forEach(item => {
const link = item.querySelector('.nav-link, .submenu-link');
const submenu = item.querySelector('.submenu, .submenu-level-2');

if (submenu && submenu.classList.contains('active')) {
submenu.classList.remove('active');
link.setAttribute('aria-expanded', 'false');
}
});
}
});

// Добавление поддержки навигации с клавиатуры
menuItems.forEach(item => {
const link = item.querySelector('.nav-link, .submenu-link');

link.addEventListener('keydown', function(e) {
const submenu = item.querySelector('.submenu, .submenu-level-2');

// Открытие подменю при нажатии Enter или пробела
if ((e.key === 'Enter' || e.key === ' ') && submenu) {
e.preventDefault();
submenu.classList.add('active');
link.setAttribute('aria-expanded', 'true');

// Фокус на первый элемент подменю
const firstSubmenuLink = submenu.querySelector('a');
if (firstSubmenuLink) {
firstSubmenuLink.focus();
}
}

// Закрытие подменю при нажатии Escape
if (e.key === 'Escape' && submenu && submenu.classList.contains('active')) {
submenu.classList.remove('active');
link.setAttribute('aria-expanded', 'false');
link.focus();
}
});
});
});

/* Показываем активное подменю */
.submenu.active,
.submenu-level-2.active {
opacity: 1;
visibility: visible;
transform: translateY(0) translateX(0);
}

/* Стили для фокуса элементов при навигации с клавиатуры */
.nav-link:focus,
.submenu-link:focus {
outline: 2px solid #4d90fe;
outline-offset: -2px;
}

/* Базовые стили остаются без изменений */

/* Медиа-запрос для планшетов */
@media screen and (max-width: 992px) {
.nav-link {
padding: 15px 15px; /* Уменьшаем отступы */
}

.submenu {
min-width: 180px; /* Уменьшаем ширину подменю */
}
}

/* Медиа-запрос для мобильных устройств */
@media screen and (max-width: 768px) {
/* Стили для гамбургер-меню */
.menu-toggle {
display: block;
cursor: pointer;
padding: 15px;
background-color: #333;
color: white;
}

.menu-toggle span {
display: block;
height: 3px;
width: 25px;
background-color: white;
margin: 5px 0;
transition: all 0.3s ease;
}

/* Анимация "гамбургера" в "крестик" */
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 6px);
}

.menu-toggle.active span:nth-child(2) {
opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -6px);
}

/* Изменяем основное меню */
.nav-list {
display: none; /* Скрываем по умолчанию */
flex-direction: column;
position: absolute;
top: 50px;
left: 0;
right: 0;
background-color: #333;
z-index: 1000;
}

/* Показываем меню при активации */
.nav-list.active {
display: flex;
}

/* Переопределяем подменю для мобильных */
.submenu, .submenu-level-2 {
position: static;
opacity: 1;
visibility: hidden;
display: none;
transform: none;
box-shadow: none;
width: 100%;
padding-left: 20px;
}

.submenu.active, .submenu-level-2.active {
display: block;
visibility: visible;
}

/* Изменяем индикаторы */
.has-submenu > .nav-link::after {
float: right;
content: ' +';
}

.has-submenu > .submenu-link::after {
content: ' +';
}

.has-submenu > .nav-link.active::after,
.has-submenu > .submenu-link.active::after {
content: ' -';
}
}

document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.menu-toggle');
const navList = document.querySelector('.nav-list');

// Переключатель мобильного меню
if (menuToggle) {
menuToggle.addEventListener('click', function() {
this.classList.toggle('active');
navList.classList.toggle('active');
});
}

// Модифицируем существующий код обработки подменю
const menuItems = document.querySelectorAll('.has-submenu');

menuItems.forEach(item => {
const link = item.querySelector('.nav-link, .submenu-link');
const submenu = item.querySelector('.submenu, .submenu-level-2');

link.addEventListener('click', function(e) {
// Проверяем ширину экрана
if (window.innerWidth <= 768) {
e.preventDefault();

// Переключаем активное состояние ссылки
this.classList.toggle('active');

// Переключаем видимость подменю
if (submenu) {
submenu.classList.toggle('active');
const isExpanded = submenu.classList.contains('active');
link.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
}
} else if (submenu) {
// Поведение для десктопов остается как раньше
e.preventDefault();
submenu.classList.toggle('active');
link.setAttribute('aria-expanded', submenu.classList.contains('active') ? 'true' : 'false');
}
});
});

// Обработка изменения размера окна
let resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Если размер окна больше мобильного порога, сбрасываем мобильные стили
if (window.innerWidth > 768) {
if (menuToggle && menuToggle.classList.contains('active')) {
menuToggle.classList.remove('active');
}

if (navList && navList.classList.contains('active')) {
navList.classList.remove('active');
}
}
}, 250);
});
});