Создание многоуровневого выпадающего меню

В этой статье я расскажу, как создать многоуровневое выпадающее меню с использованием HTML, CSS и JavaScript. Мы шаг за шагом разберем, как сделать такое меню удобным и современным. Даже если вы новичок, вы сможете следовать этим инструкциям и сделать своё собственное выпадающее меню. Поехали!

Что такое многоуровневое выпадающее меню?

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

Структура HTML для выпадающего меню

Для создания многоуровневого выпадающего меню начнем с HTML. Создадим базовую структуру меню, используя элементы <ul> и <li> для списка и подпунктов:

<nav class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a>
      <ul class="submenu">
        <li><a href="#">Веб-разработка</a></li>
        <li><a href="#">Мобильные приложения</a>
          <ul class="submenu">
            <li><a href="#">iOS</a></li>
            <li><a href="#">Android</a></li>
          </ul>
        </li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Здесь мы используем вложенные списки <ul> для создания многоуровневых пунктов меню. Каждый <li> может содержать ссылку (<a>) и вложенный список (<ul>), чтобы образовать подменю.

Стилизация меню с помощью CSS

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

/* Основные стили для меню */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > ul > li {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.menu a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  display: block;
}

/* Скрываем подменю по умолчанию */
.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Показываем подменю при наведении на родительский элемент */
.menu li:hover > .submenu {
  display: block;
}

/* Стили для элементов подменю */
.submenu li {
  position: relative;
  margin: 0;
}

.submenu .submenu {
  top: 0;
  left: 100%;
}

Добавление интерактивности с JavaScript

Для того чтобы сделать меню удобным и на мобильных устройствах, добавим немного JavaScript. С помощью JavaScript мы сможем контролировать отображение подменю при клике.

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu li');

  menuItems.forEach(item => {
    const submenu = item.querySelector('.submenu');
    if (submenu) {
      item.addEventListener('click', function(e) {
        e.stopPropagation();
        submenu.classList.toggle('show');
      });
    }
  });

  document.addEventListener('click', function() {
    document.querySelectorAll('.submenu').forEach(submenu => {
      submenu.classList.remove('show');
    });
  });
});

В этом коде мы добавляем обработчик событий на каждый элемент меню с подменю. Класс show добавляется и убирается для отображения и скрытия подменю. Также мы добавляем обработчик на весь документ, чтобы скрывать подменю при клике в любое другое место на странице.

Заключение

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

Попробуйте создать своё собственное выпадающее меню, используя этот пример. А если вы хотите научиться делать ещё более сложные интерфейсы, я рекомендую попробовать приложение Кодик. В нём вы найдёте курсы по HTML, CSS и JavaScript, которые помогут вам быстро освоить веб-разработку и создавать ещё более интересные проекты!