Как сделать меню на сайте в 2026: шапка, бургер, якоря

Меню решает, найдёт человек нужную страницу за две секунды или закроет вкладку. Собирается оно быстрее, чем кажется: разметка занимает полтора десятка строк, стили ещё столько же, а кнопка-бургер на телефоне делается вообще без JavaScript. Ниже готовый код, который можно вставить как есть, промпты для ИИ и отдельный короткий разбор для тех, кому нужно меню кафе с блюдами и QR-кодом на столе.

Из чего состоит меню сайта

Под меню обычно понимают всю навигацию сразу, но собирать её удобнее по частям. Каждая часть решает свою задачу и делается отдельно.

• Шапка со ссылками: горизонтальная полоса вверху страницы, где лежат основные разделы.
• Выпадающие пункты: подпункты, которые раскрываются при наведении или нажатии на родительский раздел.
• Бургер: кнопка из трёх полосок, за которой прячутся те же ссылки на узком экране.
• Липкая шапка: меню не уезжает вверх при прокрутке и всегда под рукой.
• Якорные ссылки: переходы не на другую страницу, а к нужному блоку той же страницы. Для одностраничного сайта это основной способ навигации.
• Подсветка текущей страницы: человек видит, где находится, и не кликает по одному пункту дважды.

Сколько пунктов ставить и какие

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

Названия пишите словами клиента, а не внутренними терминами компании. «Цены» понятнее, чем «Тарифная политика», «Как мы работаем» понятнее, чем «Методология». Если вы ещё не решили, какие разделы вообще нужны сайту, начните со структуры: мы разбирали это в материале про разделы сайта.

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

Готовый HTML и CSS для меню в шапке

Основа навигации это тег <nav> со ссылками внутри и <header> вокруг него. Никаких библиотек не нужно, браузер понимает такую разметку сам.

<header class="site-header">
  <a class="logo" href="/">Мой сайт</a>
  <nav class="main-nav">
    <a href="/" aria-current="page">Главная</a>
    <a href="/uslugi/">Услуги</a>
    <a href="/ceny/">Цены</a>
    <a href="/kontakty/">Контакты</a>
  </nav>
</header>

Атрибут aria-current="page" ставится ссылке на текущую страницу: по нему и стили подсветки удобно вешать, и программы для незрячих читают его правильно. Теперь стили.

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.main-nav { display: flex; gap: 20px; }
.main-nav a {
  color: #222;
  text-decoration: none;
  padding: 12px 4px;
  line-height: 1.2;
}
.main-nav a:hover { color: #d85a30; }
.main-nav a[aria-current="page"] { font-weight: 600; }

Здесь работают три вещи. display: flex выстраивает ссылки в строку и разводит логотип с меню по краям, gap задаёт расстояние между пунктами вместо отступов у каждой ссылки, а position: sticky с top: 0 приклеивает шапку к верху окна. Вставлять всё это нужно в index.html и подключённый к нему файл стилей: если вы делаете первую страницу с нуля, порядок действий описан в разборе сайта на HTML.

По теме: Как сделать сайт как Авито в 2026: доска объявлений с нуля

Выпадающие пункты второго уровня

Выпадающее подменю нужно, когда у раздела есть несколько похожих страниц: например, «Услуги» с четырьмя направлениями. Оборачиваете пункт в контейнер, вкладываете в него ещё один <nav> или <ul> и показываете вложенный список по наведению.

.has-sub { position: relative; }
.has-sub > .sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.has-sub:hover > .sub,
.has-sub:focus-within > .sub { display: block; }
.sub a { display: block; padding: 10px 16px; }

Строка с :focus-within тут не украшение: без неё подменю раскрывается только мышью, и человек, который ходит по сайту с клавиатуры, до вложенных пунктов не доберётся. На телефонах наведения нет вообще, поэтому второй уровень там либо раскрывают нажатием, либо показывают списком сразу, без пряток.

Бургер на телефоне без JavaScript

Скрытая навигация стоит дорого. В исследовании Nielsen Norman Group со 179 участниками спрятанное меню почти вдвое снижало шанс, что человек до него доберётся, а задачи люди решали дольше (nngroup.com). Вывод простой: на широком экране пункты держим на виду, бургер оставляем телефону.

Раскрывающийся блок умеет делать сам HTML, через теги <details> и <summary>. Скрипт не нужен, работает и без интернета, и в старых браузерах.

<details class="burger">
  <summary>Меню</summary>
  <nav class="burger-nav">
    <a href="/">Главная</a>
    <a href="/uslugi/">Услуги</a>
    <a href="/ceny/">Цены</a>
    <a href="/kontakty/">Контакты</a>
  </nav>
</details>

@media (min-width: 701px) { .burger { display: none; } }

@media (max-width: 700px) {
  .main-nav { display: none; }
  .burger { position: relative; }
  .burger summary {
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
  }
  .burger-nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 220px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  .burger-nav a { padding: 14px 16px; }
}

Размеры взяты не с потолка. Стандарт доступности WCAG 2.2 требует, чтобы область нажатия была не меньше 24 на 24 пикселя CSS (w3.org), и это минимум, а не удобный размер. На практике по пальцу комфортно попадает элемент около 44 пикселей в высоту, поэтому у пунктов стоят щедрые padding и min-height.

Липкое меню и якорные ссылки

Липкая шапка уже включена строкой position: sticky выше. У неё есть побочный эффект: при переходе по якорю страница прокручивается ровно к блоку, и шапка накрывает его заголовок. Лечится одним свойством.

html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: 80px; }

scroll-margin-top резервирует сверху столько пикселей, сколько занимает шапка, а scroll-behavior: smooth делает прокрутку плавной вместо рывка. Сами якоря работают так: в меню пишете ссылку вида href="#ceny", а нужному блоку страницы даёте id="ceny". Про плавную прокрутку, кнопку «наверх» и подсветку активного якоря есть отдельный материал про прокрутку сайта.

По теме: Как сделать окно на сайте в 2026: модальное, попап и согласие

Как попросить ИИ собрать меню за вас

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

1. Выпишите пункты меню и адреса страниц, куда они ведут. Это половина промпта.
2. Опишите поведение на телефоне: прячутся пункты в бургер или переносятся в две строки.
3. Задайте ограничения: без библиотек, без jQuery, один файл, цвета вашего сайта.
4. Попросите вернуть код целиком и объяснить, куда его вставлять.
5. Откройте результат в браузере, сузьте окно до ширины телефона и проверьте бургер и попадание пальцем по пунктам.

Пример промпта, который даёт рабочий результат с первого раза:

Ты верстальщик. Собери меню для сайта студии маникюра.
Пункты: Главная, Услуги, Цены, Мастера, Контакты.
Требования:
- один файл HTML со стилями внутри, без библиотек и без JavaScript;
- шапка липкая, высота около 64px, фон белый, ссылки тёмно-серые;
- на экранах уже 700px пункты прячутся в кнопку Меню на теге details;
- высота области нажатия у пунктов не меньше 44px;
- у ссылки текущей страницы атрибут aria-current и жирное начертание.
Верни готовый код целиком и коротко объясни, куда его вставить.

Дальше правки идут короткими репликами: «сделай фон шапки полупрозрачным с размытием», «добавь под Услуги четыре подпункта». Такой способ работы с кодом обычными фразами и называют вайб-кодингом, и меню как раз та задача, на которой его удобно попробовать первый раз.

Если нужно меню кафе: блюда, цены и QR-код

Вторая, совсем другая задача с тем же названием: электронное меню заведения, которое гость открывает по QR-коду со стола. Здесь верстать шапку не нужно, нужен каталог блюд с фото, ценами, составом и возможностью быстро поменять цену без перепечатки папок.

• Готовый сервис QR-меню. Российский qrlip даёт бесплатный тариф без ограничения по числу блюд и фото, расширенный PRO стоит 990 ₽ в месяц (qrlip.ru). Платформы уровня Restik продают меню в связке с автоматизацией: 3 490 ₽ в месяц при помесячной оплате, 2 499 ₽ при годовой и 14 дней бесплатного доступа (restik.com).
• Карточка заведения на картах. Меню и прайс загружаются в Яндекс Бизнес и 2ГИС бесплатно, и его видят люди, которые ищут, где поесть рядом. Это не заменяет сайт, но закрывает часть задачи (direct.yandex.ru).
• Своя страница с меню. Имеет смысл, когда нужны заказы без комиссии агрегаторов, свой дизайн и свои акции. Собирается тем же способом: список категорий вверху работает якорным меню, блюда идут карточками, QR-код генерируется на адрес страницы.

Если планируете принимать оплату прямо на такой странице, а не только показывать цены, посмотрите разбор про приём платежей на сайте.

Частые вопросы

Меню лучше сверху или сбоку?

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

Нужен ли JavaScript, чтобы меню работало?

Нет. Бургер делается на <details>, выпадающие пункты на :hover и :focus-within, плавная прокрутка на scroll-behavior. Скрипт понадобится для более тонких вещей: закрывать бургер после клика по пункту или подсвечивать якорь того блока, который сейчас на экране.

Почему при переходе по якорю заголовок прячется под шапкой?

Браузер прокручивает страницу к самому верху блока и не знает про липкую шапку. Добавьте блокам scroll-margin-top с высотой шапки, например 80 пикселей, и заголовок встанет ниже неё.

Как подсветить пункт текущей страницы?

Поставьте ссылке на текущую страницу атрибут aria-current="page" и опишите стиль селектором .main-nav a[aria-current="page"]. Так подсветка и визуально работает, и корректно читается программами экранного доступа.

Сколько стоит электронное меню для кафе?

От нуля до нескольких тысяч рублей в месяц. Бесплатные тарифы есть, например у qrlip, платные сервисы вроде Restik стоят 2 499 ₽ в месяц при оплате за год (restik.com) и продают меню вместе с автоматизацией зала. Своя страница обходится в стоимость домена и хостинга, но её нужно делать и обновлять самому.