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

Digital-студия WNDER

С чего начинается любое меню

В основе любой навигации лежит HTML-список. Это как фундамент дома: без него стены не построишь. Используем тег <nav> для семантики и <ul> с <li> для пунктов. Вот базовый каркас:

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

По умолчанию это вертикальный список с маркерами. Скучно, правда? Сейчас исправим.

Убираем маркеры и выстраиваем в ряд

Первым делом сбрасываем стандартные стили списка. Убираем точки, отступы и задаём флекс-контейнер. Это как собрать конструктор: детали на месте, но пока без украшений.

<style>
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  background: #f5f5f5;
  padding: 10px 20px;
  border-radius: 8px;
}
.main-nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 8px 12px;
  transition: background 0.3s;
}
.main-nav a:hover {
  background: #ddd;
  border-radius: 4px;
}
</style>

Теперь меню горизонтальное, с отступами и лёгкой подсветкой при наведении. Уже лучше, но можно сделать ещё круче.

Правило: Всегда используйте display: flex для горизонтального меню. Это избавляет от кучи хаков с float и inline-block.

Добавляем изюминку: подчёркивание и анимация

Скучное меню — это когда ссылки просто меняют цвет. Давайте добавим анимированное подчёркивание, которое выезжает слева направо. Это как вишенка на торте.

<style>
.main-nav a {
  position: relative;
  text-decoration: none;
  color: #333;
  padding: 8px 0;
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #2196f3;
  transition: width 0.3s ease;
}
.main-nav a:hover::after {
  width: 100%;
}
</style>

Теперь при наведении под ссылкой появляется синяя полоска, которая плавно растягивается. Мелочь, а приятно.

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

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

<input type="checkbox" id="menu-toggle" class="menu-toggle">
<label for="menu-toggle" class="menu-btn">☰</label>
<nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Портфолио</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

<style>
.menu-toggle { display: none; }
.menu-btn { display: none; font-size: 24px; cursor: pointer; }
@media (max-width: 600px) {
  .menu-btn { display: block; }
  .main-nav ul {
    display: none;
    flex-direction: column;
    gap: 10px;
  }
  .menu-toggle:checked ~ .main-nav ul {
    display: flex;
  }
}
</style>

Теперь на узких экранах появляется иконка бургера, а меню раскрывается при клике. Всё без единой строчки JS.

Лайфхак: Вместо иконки бургера можно использовать текст «Меню» — так понятнее для некоторых пользователей. Главное, чтобы кликабельная область была не меньше 44x44 пикселей.

Сравнение подходов к стилизации

Выбор метода зависит от задачи. Вот таблица, которая поможет определиться.

Подход Плюсы Минусы
Flexbox Простота, гибкость, поддержка всех браузеров Нет автоматического переноса без flex-wrap
CSS Grid Идеален для сложных макетов, точное позиционирование Избыточен для простого меню
Inline-block Работает везде, даже в древних браузерах Пробелы между элементами, нужно возиться с font-size
Float Классика, но устарел Требует clearfix, непредсказуем

Для большинства случаев хватит Flexbox. Grid — если меню сложное, например, с логотипом по центру и ссылками по бокам.

Цвета, тени и скругления: доводим до ума

Чтобы меню выглядело современно, добавьте немного объёма. Лёгкая тень, скруглённые углы и плавные переходы творят чудеса.

<style>
.main-nav ul {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 12px 24px;
}
.main-nav a {
  border-radius: 6px;
  padding: 8px 16px;
  transition: all 0.2s;
}
.main-nav a:hover {
  background: #2196f3;
  color: #fff;
}
</style>

Теперь меню выглядит как аккуратная кнопочная панель. При наведении ссылки становятся синими с белым текстом.

Правило: Не увлекайтесь тенями. Одна мягкая тень на контейнер — достаточно. Иначе будет выглядеть как ёлка.

Что в итоге

Стилизация навигации — это не rocket science. Главное — начать с семантичного HTML, затем добавить Flexbox для расположения, анимации для интерактивности и адаптивность для мобильных. Не бойтесь экспериментировать с цветами и формами, но помните о юзабилити. Меню должно быть удобным, а не просто красивым.

Попробуйте применить эти приёмы в своём проекте, и вы увидите, как преобразится сайт. Удачи!

Студия WNDER