Мобильное меню сайта: 7 вариантов навигации с HTML и CSS

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

Гамбургер меню — король мобильной навигации

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

Почему именно так? На мобильной версии сайта иконка занимает 48 пикселей, а полный список пунктов меню может забрать половину экрана. Гамбургер меню экономит пространство, при этом скрывая ничего не теряя — все элементы остаются доступны.

При клике на иконку открывается полное меню: главная, разделы с услугами, контакты, блог, портфолио, ссылки на социальные сети. Это может быть боковая панель слева или модальное окно во весь экран. Технически работает так: скрытый список <ul> с элементами <li> скрывают CSS-свойством display: none. При активации класса происходит переключение на display: block.

<button class="menu-toggle" aria-label="Меню">
  <span></span>
  <span></span>
  <span></span>
</button>
<ul class="menu-list" id="nav-menu">
  <li><a href="/">Главная</a></li>
  <li><a href="/services">Услуги</a></li>
  <li><a href="/blog">Блог</a></li>
  <li><a href="/contacts">Контакты</a></li>
</ul>

.menu-list {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  background: white;
  padding: 20px 0;
  z-index: 1000;
}
.menu-list.active {
  display: block;
}
.menu-list li {
  list-style: none;
}
.menu-list li a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: #333;
}

Недостаток один: пользователи не видят, какие разделы существуют, пока не нажмут на иконку. Но за 15 лет все уже привыкли к этому паттерну. Главное — иконку делать узнаваемой и размещать на видном месте экрана.

Горизонтальное меню для простых структур

Горизонтальное меню подходит для навигации с 3–5 основными пунктами. Они видны все сразу в одной строке, как вкладки. Используют этот паттерн интернет магазины: Wildberries, Ozon, Яндекс.Маркет часто показывают Каталог, Акции, Новое, О магазине, Контакты в цепочке вкладок.

Работает это хорошо, потому что все варианты видны сразу, без дополнительных кликов. Активные пункты выделяются цветом или полосой внизу — пользователь точно знает, где находится на размере экрана.

<ul class="nav-tabs">
  <li><a href="/">Главная</a></li>
  <li class="active"><a href="/catalog">Каталог</a></li>
  <li><a href="/sales">Акции</a></li>
  <li><a href="/contacts">Контакты</a></li>
</ul>

.nav-tabs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-tabs li {
  flex: 1;
  text-align: center;
}
.nav-tabs a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #666;
  border-bottom: 3px solid transparent;
}
.nav-tabs li.active a {
  border-bottom-color: #007bff;
  color: #007bff;
}

Проблема: если пунктов больше пяти, они не влезут в ширину экрана. Начнётся горизонтальная прокрутка, что раздражает. Поэтому этот паттерн работает только для 3–5 элементов.

Вертикальное меню — полный список пунктов

Вертикальное меню показывает все элементы подряд в колонку. Каждый пункт меню на отдельной строке, вся структура развернута и видима сразу. Полезно для интернет магазинов с множеством категорий товаров. Пользователь видит весь ассортимент разделов и выбирает нужный.

Если у каждого пункта есть подкатегории, они раскрываются при нажатии. Это выпадающие подменю с дополнительными уровнями навигации.

<ul class="menu-vertical">
  <li><a href="/">Главная</a></li>
  <li class="has-submenu">
    <a href="/services">Услуги</a>
    <button class="toggle">▼</button>
    <ul class="submenu" style="display: none;">
      <li><a href="/services/design">Дизайн</a></li>
      <li><a href="/services/dev">Разработка</a></li>
      <li><a href="/services/seo">SEO</a></li>
    </ul>
</li>
<li><a href="/blog">Блог</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>

.menu-vertical li {
  display: block;
  border-bottom: 1px solid #eee;
}
.menu-vertical li a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: #333;
}
.submenu {
  display: none;
  list-style: none;
  padding-left: 20px;
  margin: 0;
  background: #f5f5f5;
}
.has-submenu.open .submenu {
  display: block;
}

Это даёт полный обзор структуры сайта, особенно когда меню имеет несколько уровней вложенности.

Выпадающий список на мобильных: проблема сенсора

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

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

<li class="menu-item">
  <a href="/products">Товары</a>
  <button class="expand" aria-expanded="false">▼</button>
  <ul class="submenu" hidden>
    <li><a href="/products/electronics">Электроника</a></li>
    <li><a href="/products/clothing">Одежда</a></li>
  </ul>
</li>

.expand {
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}
.submenu {
  display: none;
  list-style: none;
  padding-left: 20px;
}
.submenu[hidden="false"] {
  display: block;
}

Каскадное меню раскрывается уровень за уровнем. Пользователь видит все варианты и удобно касается нужной области экрана.

Фиксированное меню — bottom bar всегда видна

Фиксированное меню остаётся на экране при прокрутке. Обычно это нижняя панель навигации (bottom bar) с основными разделами. Открой Instagram, TikTok, Telegram — видишь пять иконок внизу. Главная, поиск, создание, сообщения, профиль. Они всегда доступны, несмотря на прокрутку контента.

Это удобно, потому что: - Всегда видно, без скролла вверх - Механика доступа к главным разделам сайта - Быстрое переключение в один клик

Но есть цена: фиксированное меню занимает 56 пикселей высоты. На экране 667 пикселей остаётся 611 на контент. Для некоторых проектов это потеря, для приложений со множеством переходов — выигрыш.

<nav class="bottom-nav">
  <ul>
    <li><a href="/" class="active">
      <span class="icon">🏠</span>
      <span>Главная</span>
    </a></li>
    <li><a href="/search">
      <span class="icon">🔍</span>
      <span>Поиск</span>
    </a></li>
    <li><a href="/create">
      <span class="icon">➕</span>
      <span>Создать</span>
    </a></li>
    <li><a href="/messages">
      <span class="icon">💬</span>
      <span>Сообщения</span>
    </a></li>
    <li><a href="/profile">
      <span class="icon">👤</span>
      <span>Профиль</span>
    </a></li>
  </ul>
</nav>

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: white;
  border-top: 1px solid #ddd;
  z-index: 100;
}
.bottom-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bottom-nav li {
  flex: 1;
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  text-decoration: none;
  color: #666;
  font-size: 12px;
}
.bottom-nav a.active {
  color: #007bff;
}
body {
  padding-bottom: 56px;
}

Активный пункт меню подсвечивается цветом. Пользователь видит, в каком разделе находится.

Модальное окно — меню поверх контента

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

Как меню навигации модальное окно применяют редко. Можно использовать при запросе входа, согласии на политику конфиденциальности, или когда временно нужно заблокировать взаимодействие с остальной страницей.

<div class="modal-overlay" id="menu-modal">
  <div class="modal-content">
    <button class="close">✕</button>
    <ul class="modal-menu">
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
</div>

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.modal-overlay.active {
  display: block;
}
.modal-content {
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 8px;
}

Адаптивное меню — меняется под размер экрана

Адаптивное меню — один набор элементов, который меняет внешний вид в зависимости от размера экрана. На большом экране монитора горизонтальная навигация. На планшете становится компактнее. На смартфоне трансформируется в гамбургер меню. Это стандарт в разработке.

Один HTML-файл, разные CSS-стили через media queries. Вот пример адаптивного меню на разных версиях устройства:

/* Десктоп */
@media (min-width: 1024px) {
  .menu {
    display: flex;
    flex-direction: row;
  }
  .hamburger-icon {
    display: none;
  }
}
/* Планшет */
@media (max-width: 1023px) and (min-width: 768px) {
  .menu {
    display: flex;
    flex-direction: row;
  }
}
/* Мобильный */
@media (max-width: 767px) {
  .menu {
    display: none;
  }
  .hamburger-icon {
    display: block;
  }
}

Nike, Apple, Spotify используют адаптивное меню. На мобильном телефоне — гамбургер, на планшете — горизонтальное меню, на компьютере — полноценная навигация с подменю и эффектами при наведении.

Выбор правильного паттерна экономит часы фрустрации пользователей. Простая структура (3–5 пунктов) — горизонтальное меню. Множество разделов — гамбургер или вертикальное. Приложение с частыми переходами — фиксированное меню внизу. Это не магия, это удобство.