Как сделать меню навигации с подменю

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

Структура HTML

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

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li>
      <a href="#">Категория 1</a>
      <ul>
        <li><a href="#">Подкатегория 1.1</a></li>
        <li><a href="#">Подкатегория 1.2</a></li>
        <li><a href="#">Подкатегория 1.3</a></li>
      </ul>
    </li>
    <li><a href="#">Категория 2</a></li>
    <li>
      <a href="#">Категория 3</a>
      <ul>
        <li><a href="#">Подкатегория 3.1</a></li>
        <li><a href="#">Подкатегория 3.2</a></li>
      </ul>
    </li>
  </ul>
</nav>

🔧 Здесь мы создали основное меню с четырьмя элементами, два из которых имеют подменю.

Оформление CSS

Теперь применим стили CSS для оформления нашего меню:

nav {
  background-color: #333;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav li {
  float: left;
}
nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
nav li a:hover {
  background-color: #111;
}
nav ul ul {
  display: none;
  position: absolute;
  min-width: 160px;
  background-color: #333;
}
nav ul ul li {
  float: none;
}
nav ul ul li a {
  padding: 12px 16px;
}
nav ul ul li a:hover {
  background-color: #444;
}

🎨 В этом примере мы задаем основные стили для нашего меню, включая цвет фона, стили текста и наведения мыши.

Добавление JavaScript

Теперь добавим немного JavaScript кода для работы с подменю:

document.addEventListener("DOMContentLoaded", function() {
  var dropdowns = document.querySelectorAll("nav ul li");

  for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].addEventListener("mouseenter", function() {
      var submenu = this.querySelector("ul");
      if (submenu) {
        submenu.style.display = "block";
      }
    });

    dropdowns[i].addEventListener("mouseleave", function() {
      var submenu = this.querySelector("ul");
      if (submenu) {
        submenu.style.display = "none";
      }
    });
  }
});

✨ В данном примере, когда мы наводим курсор на элемент меню с подменю, оно становится видимым, а при уходе курсора — снова скрывается.

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