Как стилизовать навигационные меню на HTML и CSS без головной боли

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

Почему меню — это не просто список ссылок

Многие новички пишут навигацию как набор тегов <a> в <div>. Это работает, но выглядит убого. Семантически правильнее использовать <nav> и <ul>. Это улучшает SEO и доступность для скринридеров. Плюс, CSS-стилизация становится логичнее.

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

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/services">Услуги</a></li>
    <li><a href="/contact">Контакты</a></li>
  </ul>
</nav>

Теперь добавим CSS, чтобы убрать маркеры списка и сделать пункты горизонтальными:

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

nav li {
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

Это уже выглядит аккуратно. Но мы пойдем дальше.

Горизонтальное меню с эффектами наведения

Просто ссылки — скучно. Добавим интерактивности. Например, подсветку при наведении мыши. Это делается через псевдокласс :hover. Вот пример с плавным переходом:

nav a {
  text-decoration: none;
  color: #fff;
  background-color: #007BFF;
  padding: 10px 15px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

nav a:hover {
  background-color: #0056b3;
}

Обратите внимание на transition. Он делает анимацию плавной, без резких скачков. Это мелочь, но она сильно влияет на восприятие.

Вертикальное меню для боковых панелей

Иногда нужно разместить меню слева или справа. Например, в админке или лендинге. Вертикальное меню делается просто: убираем display: flex и задаем ширину.

nav.vertical ul {
  list-style: none;
  padding: 0;
  width: 200px;
}

nav.vertical li {
  margin-bottom: 10px;
}

nav.vertical a {
  display: block;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
}

nav.vertical a:hover {
  background-color: #e2e6ea;
}

Для HTML просто добавьте класс vertical к тегу <nav>. Адаптивность можно сделать через медиа-запросы, чтобы на мобильных меню становилось вертикальным.

Выпадающее меню (dropdown) на чистом CSS

Сложный пункт — подменю. Многие используют JavaScript, но на самом деле можно обойтись только CSS. Идея: скрываем подменю через display: none, а при наведении на родительский пункт показываем его через :hover.

Вот HTML для выпадающего меню:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li>
      <a href="/services">Услуги</a>
      <ul class="dropdown">
        <li><a href="/services/web">Веб-разработка</a></li>
        <li><a href="/services/seo">SEO</a></li>
        <li><a href="/services/marketing">Маркетинг</a></li>
      </ul>
    </li>
    <li><a href="/contact">Контакты</a></li>
  </ul>
</nav>

А теперь CSS-магия:

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  position: relative;
}

nav li {
  position: relative;
  margin-right: 20px;
}

nav li ul.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 10px 0;
  min-width: 150px;
}

nav li:hover ul.dropdown {
  display: block;
}

nav li ul.dropdown li {
  margin: 0;
}

nav li ul.dropdown a {
  padding: 8px 15px;
  display: block;
  white-space: nowrap;
}

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

Адаптивное меню с бургер-иконкой

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

HTML:

<nav class="navbar">
  <div class="burger" id="burger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="nav-links" id="navLinks">
    <li><a href="/">Главная</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/services">Услуги</a></li>
    <li><a href="/contact">Контакты</a></li>
  </ul>
</nav>

CSS:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
}

.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.burger span {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 3px 0;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .burger {
    display: flex;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    margin: 10px 0;
  }
}

JavaScript:

const burger = document.getElementById('burger');
const navLinks = document.getElementById('navLinks');

burger.addEventListener('click', () => {
  navLinks.classList.toggle('active');
});

Это базовая реализация. Можно добавить анимацию для бургера (крестик) и плавное появление меню.

Что в итоге

Мы разобрали три основных типа меню: горизонтальное, вертикальное и выпадающее. Плюс адаптивную версию с бургером. Главные выводы:

• Используйте семантическую разметку <nav> и <ul>.
• Не забывайте про transition для плавности.
• Выпадающие меню можно сделать на чистом CSS без JS.
• Для мобильных устройств используйте медиа-запросы и бургер-иконку.

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