Создание навигационного меню с выпадающими подменю является важной задачей при разработке веб-сайтов. В этом ответе мы рассмотрим, как можно реализовать такой элемент интерфейса с помощью HTML и CSS, а также немного JavaScript для улучшения взаимодействия с пользователем.

Шаг 1: Основная структура HTML

Начнем с создания основной структуры HTML для нашего меню. Вот пример базовой разметки:

<nav>
    <ul>
        <li><a href="#home">Главная</a></li>
        <li><a href="#about">О нас</a>
            <ul>
                <li><a href="#team">Наша команда</a></li>
                <li><a href="#history">Наша история</a></li>
            </ul>
        </li>
        <li><a href="#services">Услуги</a>
            <ul>
                <li><a href="#consulting">Консалтинг</a></li>
                <li><a href="#support">Поддержка</a></li>
            </ul>
        </li>
        <li><a href="#contact">Контакты</a></li>
    </ul>
</nav>

В этом примере мы создаем навигационное меню с основными пунктами, такими как «Главная», «О нас», «Услуги» и «Контакты». Пункт «О нас» и пункт «Услуги» имеют выпадающие подменю, которые содержат дополнительные ссылки.

Шаг 2: Стилизация с помощью CSS

Теперь давайте добавим немного CSS для стилизации нашего меню. Мы сделаем его более привлекательным и добавим эффект выпадения для подменю:

nav {
    background-color: #333;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    float: left;
    position: relative;
}

nav ul li a {
    display: block;
    color: white;
    padding: 14px 20px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #575757;
}

nav ul li ul {
    display: none;
    position: absolute;
    background-color: #333;
    z-index: 1;
}

nav ul li:hover ul {
    display: block;
}

nav ul li ul li {
    float: none;
}

С помощью этого CSS-кода мы стилизуем меню, задаем цвет фона, цвет текста и добавляем эффекты при наведении. Подменю будет скрыто по умолчанию и появится только при наведении на пункт меню, который его содержит.

Шаг 3: Добавление JavaScript для улучшения функциональности

Хотя мы уже создали работающее меню с помощью HTML и CSS, мы можем улучшить взаимодействие с пользователем, добавив JavaScript. Например, мы можем сделать так, чтобы подменю открывалось по клику:

const menuItems = document.querySelectorAll('nav ul li');

menuItems.forEach(item => {
    item.addEventListener('click', function(event) {
        event.stopPropagation();
        const submenu = this.querySelector('ul');
        if (submenu) {
            submenu.classList.toggle('active');
        }
    });
});

document.addEventListener('click', function() {
    menuItems.forEach(item => {
        const submenu = item.querySelector('ul');
        if (submenu) {
            submenu.classList.remove('active');
        }
    });
});

Этот код добавляет обработчик событий на каждый пункт меню. При клике на пункт меню с подменю оно будет открываться или закрываться. Также добавлен обработчик на документ для закрытия всех подменю, если пользователь кликнет вне меню.

Шаг 4: Итоговый результат

В результате мы получаем навигационное меню с выпадающими подменю, которое выглядит привлекательно и удобно в использовании. Мы можем расширять и модифицировать его по своему усмотрению, добавляя новые пункты, улучшая стили или добавляя дополнительные функции.

Заключение

Создание навигационного меню с выпадающими подменю — это полезный навык для веб-разработчиков. С помощью HTML, CSS и JavaScript вы можете создать красивое и функциональное меню, которое улучшит пользовательский опыт на вашем сайте.

Не забывайте тестировать ваше меню на различных устройствах и браузерах, чтобы убедиться, что оно работает корректно везде.