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

Digital-студия WNDER

Почему стандартное меню — это скучно?

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

Давайте сразу к делу. Вот базовый HTML для меню:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Портфолио</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Это скелет. Теперь добавим стили.

Горизонтальное меню: убираем маркеры и выстраиваем в ряд

Первым делом убираем маркеры списка и отступы. Затем делаем элементы строчными или используем flexbox. Я предпочитаю flex — это гибко и современно.

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #f0f0f0;
}

Уже неплохо. Но давайте добавим изюминку — подчёркивание при наведении, которое плавно появляется.

Правило: Всегда используйте transition для плавных изменений. Резкие скачки цвета или размера выглядят дёшево.

Выпадающие меню: когда нужно больше ссылок

Если пунктов много, без выпадающего списка не обойтись. Сделаем подменю на чистом CSS, без JavaScript. Всё просто: при наведении на родительский пункт показываем вложенный список.

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li>
      <a href="#">Услуги</a>
      <ul>
        <li><a href="#">Веб-разработка</a></li>
        <li><a href="#">Дизайн</a></li>
      </ul>
    </li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Теперь стили. Скрываем вложенный список и показываем при наведении на родителя.

nav ul ul {
  display: none;
  position: absolute;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 10px;
  border-radius: 5px;
}

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

nav ul ul li {
  margin: 5px 0;
}

Обратите внимание на position: absolute — подменю не сдвигает остальные элементы. И не забудьте про z-index, если что-то перекрывается.

Адаптивность: меню для мобильных

На маленьких экранах горизонтальное меню не влезет. Есть два пути: либо превратить его в вертикальное, либо сделать бургер-меню. Второй вариант требует JavaScript, но можно обойтись и CSS-трюком с чекбоксом.

Вот пример простого адаптивного меню с чекбоксом:

<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">Меню</label>
<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a></li>
  </ul>
</nav>
#menu-toggle {
  display: none;
}

label {
  display: none;
  cursor: pointer;
}

@media (max-width: 600px) {
  label {
    display: block;
  }
  nav ul {
    display: none;
    flex-direction: column;
  }
  #menu-toggle:checked + label + nav ul {
    display: flex;
  }
}

Этот метод не требует JS и работает во всех современных браузерах. Но если нужна анимация, лучше взять JavaScript.

Полезные свойства CSS для навигации

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

Свойство Что делает Пример значения
display Определяет тип отображения (flex, block, inline-block) flex
list-style Убирает маркеры списка none
text-decoration Убирает подчёркивание ссылок none
position Задаёт позиционирование (для выпадающих меню) absolute
transition Плавные переходы all 0.3s ease
Лайфхак: Используйте gap вместо margin для отступов между пунктами в flex-контейнере. Это избавляет от лишних вычислений и делает код чище.

Анимации и эффекты: делаем меню живым

Ничто так не оживляет интерфейс, как анимация. Попробуйте добавить подчёркивание, которое растёт от центра при наведении. Это делается с помощью псевдоэлемента ::after.

nav a {
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.3s, left 0.3s;
}

nav a:hover::after {
  width: 100%;
  left: 0;
}

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

Заключение

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

Помните: хорошее меню — то, которое незаметно. Пользователь должен интуитивно понимать, куда нажать. И да, не забывайте про доступность: используйте семантические теги и достаточный контраст.

В итоге вы получите стильное и функциональное меню, которое украсит любой сайт. Дерзайте!

Студия WNDER