Как сделать горизонтальное меню на CSS

2014-02-09 веб-разработка, html, CSS, верстка

Обновлено 2026/06/11

Сегодня навигация — это важнейший элемент UX и SEO. Меню должно быть семантически понятным для поисковых роботов, доступным для скринридеров и, самое главное, адаптивным для мобильных экранов.

В этом руководстве мы разберем, как создать современное горизонтальное меню для сайта на чистом HTML5 и CSS Flexbox — без использования устаревших флоатов (float: left) и тяжелых JavaScript-библиотек.

1. Простое горизонтальное меню на Flexbox

Для создания навигации мы используем семантический тег <nav> и стандартный список. Flexbox позволяет выстроить элементы в ряд и управлять отступами буквально парой строчек кода.

HTML

<nav class="main-nav">
 <ul class="menu-list">
 <li><a href="#">Главная</a></li>
 <li><a href="#">О компании</a></li>
 <li><a href="#">Услуги</a></li>
 <li><a href="#">Блог</a></li>
 <li><a href="#">Контакты</a></li>
 </ul>
</nav>

CSS

.main-nav {
 background-color: #2c3e50;
 padding: 0 20px;
}

.menu-list {
 display: flex; /* Включаем Flexbox */
 flex-wrap: wrap; /* Разрешаем перенос на новую строку при нехватке места */
 list-style: none;
 margin: 0;
 padding: 0;
 gap: 20px; /* Современный способ задания отступов между пунктами */
}

.menu-list li a {
 display: block;
 color: #ffffff;
 text-decoration: none;
 padding: 15px 10px;
 transition: background-color 0.3s ease;
}

.menu-list li a:hover {
 background-color: #34495e;
}

SEO-заметка: Использование тега <nav> вместо обычного <div> помогает поисковым роботам Google мгновенно определить архитектуру вашего сайта и быстрее индексировать важные разделы.

2. Горизонтальное меню с выпадающим списком подпунктов

Чтобы реализовать многоуровневую навигацию (dropdown), мы вкладываем один список внутрь другого и управляем его отображением через CSS.

HTML

<nav class="main-nav">
 <ul class="menu-list">
 <li><a href="#">Главная</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle">Услуги &blacktriangledown;</a>
 <ul class="submenu">
 <li><a href="#">Веб-разработка</a></li>
 <li><a href="#">SEO-оптимизация</a></li>
 <li><a href="#">Контент-маркетинг</a></li>
 </ul>
 </li>
 <li><a href="#">Блог</a></li>
 <li><a href="#">Контакты</a></li>
 </ul>
</nav>

CSS

/* Базовые стили родительского меню те же, что в первом примере */
.dropdown {
 position: relative; /* База для позиционирования подменю */
}

.submenu {
 display: none; /* Скрываем подменю по умолчанию */
 position: absolute;
 top: 100%;
 left: 0;
 background-color: #ffffff;
 min-width: 200px;
 box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
 list-style: none;
 margin: 0;
 padding: 10px 0;
 z-index: 100;
}

.submenu li a {
 color: #2c3e50;
 padding: 10px 20px;
}

.submenu li a:hover {
 background-color: #f8f9fa;
 color: #2980b9;
}

/* Показываем подменю при наведении на десктопах */
@media (min-width: 769px) {
 .dropdown:hover .submenu {
 display: block;
 }
}

Смотреть живой пример (Демонстрация меню)

3. Мобильная адаптивность (Mobile-First подход)

Поведение :hover (наведение мыши) не работает на смартфонах. Чтобы меню корректно отображалось на тачскринах, добавим медиа-запрос, который перестраивает навигацию в вертикальный стек, и простейший скрипт для открытия подпунктов по клику.

Дополнительный CSS для мобильных устройств

@media (max-width: 768px) {
 .menu-list {
 flex-direction: column; /* Выстраиваем пункты вертикально */
 gap: 0;
 }

 .menu-list li {
 width: 100%;
 }

 .submenu {
 position: static; /* Отменяем абсолютное позиционирование на смартфонах */
 box-shadow: none;
 background-color: #34495e;
 padding-left: 20px;
 }

 .submenu li a {
 color: #ffffff;
 }

 /* Класс, который будет добавляться через JS при клике */
 .dropdown.is-open .submenu {
 display: block;
 }
}

Минимум JavaScript для тачскринов

Этот компактный скрипт отслеживает клики на мобильных устройствах и аккуратно разворачивает подменю:

document.addEventListener('DOMContentLoaded', () => {
 const dropdownToggle = document.querySelector('.dropdown-toggle');
 
 if (window.innerWidth <= 768 && dropdownToggle) {
 dropdownToggle.addEventListener('click', (e) => {
 e.preventDefault();
 dropdownToggle.parentElement.classList.toggle('is-open');
 });
 }
});

Резюме: почему Flexbox лучше старых методов?

Больше никаких костылей: Вам больше не нужно обнулять отступы у первого и последнего элемента с помощью классов вроде .first или .last. Свойство gap автоматически распределяет расстояние только между соседними элементами.
Чистый код: Отсутствие хаков с очисткой потока (clearfix), которые были обязательны при использовании float.
Идеальный UX: Меню гибко подстраивается под экраны любых размеров, предотвращая горизонтальный скролл и поломку сетки сайта.

Автор — Михаил Апсолямов
Занимаюсь SEO‑продвижением сайтов в Хабаровске: от разработки стратегии до вывода в топ-10 Яндекса и Google. Опыт работы — с 2009 года.

Другие замётки в тему