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

Digital-студия WNDER

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

Основа основ: HTML-структура меню

Прежде чем красить и анимировать, нужно правильно построить скелет. Самое надёжное решение — использовать семантический тег <nav> и список <ul>. Так делают все профессионалы, и вот почему:

  • Скринридеры (программы для незрячих) понимают, что это навигация.
  • Список легко стилизовать: убрать маркеры, выстроить в ряд.
  • Вложенные списки автоматически создают иерархию для выпадающих меню.

Вот базовый HTML-шаблон, который мы будем улучшать:

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

Обратите внимание: вложенный <ul> находится внутри <li> с ссылкой «Услуги». Это стандартный приём для выпадашек. Без него CSS-селекторы будут работать не так, как вы ожидаете.

Правило: Всегда используйте <nav> для главного меню. Если на странице несколько навигационных блоков (например, хлебные крошки и меню в подвале), добавьте атрибут aria-label, чтобы обозначить их назначение.

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

По умолчанию список идёт вертикально, а перед каждым пунктом красуется жирная точка. Чтобы получить классическое горизонтальное меню, нужно сделать три вещи:

  1. Убрать маркеры у <ul>.
  2. Убрать отступы и поля.
  3. Сделать элементы списка строчно-блочными или использовать флексбокс.

Вот CSS-код, который превращает список в аккуратную горизонтальную панель:

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  background-color: #333;
  padding: 15px 20px;
  border-radius: 8px;
}

.main-nav li {
  position: relative;
}

.main-nav a {
  text-decoration: none;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  padding: 8px 12px;
  transition: background-color 0.3s ease;
  border-radius: 4px;
}

.main-nav a:hover {
  background-color: #555;
}

Теперь меню выглядит как тёмная панель с белыми ссылками, которые подсвечиваются при наведении. Согласитесь, уже лучше, чем стандартный список.

Флексбокс (display: flex) здесь — ключевой инструмент. Он автоматически выравнивает элементы и позволяет легко управлять промежутками через gap. Если нужна поддержка очень старых браузеров (например, IE11), можно использовать display: inline-block для <li>, но сегодня это уже редкость.

Выпадающее меню: магия вложенных списков

Выпадающие подменю — это то, что отличает любителя от профессионала. Пользователь наводит курсор на «Услуги», и снизу появляется список. Как это работает?

Сначала скрываем вложенный список с помощью display: none или visibility: hidden. Затем при наведении на родительский <li> показываем его. Вот пример на чистом CSS:

.main-nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 180px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 100;
}

.main-nav li:hover ul {
  display: block;
}

.main-nav li ul li {
  padding: 0;
}

.main-nav li ul a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  white-space: nowrap;
}

.main-nav li ul a:hover {
  background-color: #666;
}

Обратите внимание на position: absolute у подменю. Оно позиционируется относительно родительского <li>, у которого стоит position: relative. Это гарантирует, что выпадашка появится точно под нужным пунктом, а не в случайном месте страницы.

Свойство z-index: 100 нужно, чтобы подменю перекрывало другие элементы на странице. Без него оно может «уехать» под соседние блоки.

Лайфхак: Добавьте transition: opacity 0.3s и вместо display: none используйте opacity: 0; visibility: hidden;. Тогда подменю будет плавно проявляться, а не резко выскакивать. При наведении меняйте на opacity: 1; visibility: visible;.

Адаптивность: как не сломать меню на телефоне

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

Самый простой способ — при ширине экрана меньше 768 пикселей перестроить меню в вертикальный список:

@media (max-width: 768px) {
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 10px;
  }
  
  .main-nav li {
    width: 100%;
  }
  
  .main-nav a {
    display: block;
    padding: 12px 16px;
  }
  
  .main-nav li ul {
    position: static;
    display: none;
    background-color: #555;
    box-shadow: none;
    padding-left: 20px;
  }
  
  .main-nav li:hover ul {
    display: block;
  }
}

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

Если хотите пойти дальше, используйте CSS-переменные для цветов и отступов. Это упростит поддержку и позволит менять тему сайта в одном месте:

:root {
  --nav-bg: #333;
  --nav-link-color: #fff;
  --nav-hover-bg: #555;
  --nav-padding: 15px 20px;
}

.main-nav ul {
  background-color: var(--nav-bg);
  padding: var(--nav-padding);
}

.main-nav a {
  color: var(--nav-link-color);
}

.main-nav a:hover {
  background-color: var(--nav-hover-bg);
}

Сравнение подходов: таблица свойств и приёмов

Чтобы вы не запутались в выборе инструментов, вот таблица с основными CSS-свойствами для стилизации меню и их назначением:

Свойство Для чего нужно Пример значения
display: flex Выстраивает пункты меню в ряд flex
list-style: none Убирает маркеры списка none
position: absolute Позиционирует выпадающее меню absolute
transition Добавляет плавность при наведении background-color 0.3s
@media Адаптирует меню под мобильные max-width: 768px

Как видите, ничего сверхъестественного. Главное — понимать, зачем нужно каждое свойство, и не бояться экспериментировать.

Что в итоге

Стилизация навигационного меню — это не про магию, а про последовательность. Сначала правильная HTML-структура с <nav> и вложенными списками. Потом базовый CSS: убираем маркеры, выстраиваем в ряд через флексбокс, добавляем цвета и отступы. Затем — выпадающие подменю с абсолютным позиционированием и плавными переходами. И наконец, адаптивность через медиазапросы, чтобы меню не ломалось на телефонах.

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

И помните: даже самое навороченное меню не спасёт сайт с плохим контентом. Но если контент хороший, стильное меню сделает его ещё лучше.

Совет напоследок: Проверяйте меню в разных браузерах и на разных устройствах. То, что идеально выглядит в Chrome на десктопе, может развалиться в Safari на iPhone. Используйте инструменты разработчика, чтобы эмулировать мобильные экраны.
Студия WNDER