Зачем оптимизировать мобильное меню
Мобильное меню — основной элемент навигации для 60-70% пользователей сайта. Если меню неудобное, пользователь не найдёт нужную страницу и уйдёт. Это не теория — я вижу по данным Яндекс Метрики: на сайтах с неудобным мобильным меню показатель отказов на 15-25% выше, чем на сайтах с продуманной навигацией.
Для SEO мобильное меню критично по двум причинам. Первая: поведенческие факторы. Если пользователь не может перейти на страницу услуги из меню — он не перейдёт. Время на сайте падает, глубина просмотра падает, конверсия падает. Вторая: индексация. Яндекс и Google индексируют мобильную версию сайта (mobile-first indexing). Если страница не доступна из мобильного меню — она получает меньше внутреннего веса, а в крайних случаях может быть хуже проиндексирована.
Отдельная проблема — подменю (вложенные пункты). На десктопе подменю раскрывается при наведении мыши. На мобильных наведения нет — нужен тап. Многие темы WordPress просто скрывают подменю на мобильных, оставляя только пункты первого уровня. В результате пользователь не видит подразделы: отдельные услуги, категории товаров, разделы блога. Это недопустимо.
Пошаговая инструкция
Шаг 1. Проверьте текущее состояние мобильного меню
Откройте сайт на реальном мобильном устройстве (не в DevTools — это симуляция, не реальный опыт). Проверьте:
- Иконка бургер-меню видна и легко нажимается? Минимальный размер — 44x44px по рекомендациям Apple, 48x48px по рекомендациям Google.
- Меню открывается без задержки? Если есть анимация — она не должна длиться дольше 300ms.
- Все пункты первого уровня видны? Не скрыты, не обрезаны.
- Подменю (второй уровень) доступно? Есть ли иконка раскрытия (шеврон, плюс, стрелка)?
- Можно ли перейти на родительский пункт И раскрыть его подменю? Нажатие на «Услуги» — переходит на /uslugi/, нажатие на шеврон — раскрывает список услуг. Это два разных действия.
- Меню закрывается при нажатии вне его области? Есть крестик закрытия?
- При открытом меню фон затемнён (overlay) — чтобы было понятно, что меню поверх контента?
Шаг 2. Реализуйте бургер-меню с раскрывающимися подпунктами
Стандартная схема мобильного меню для сайтов услуг и интернет-магазинов:
- Бургер-иконка (три горизонтальные линии) — в шапке, справа или слева. По тапу открывает выдвижную панель.
- Выдвижная панель — полноэкранная или занимающая 80% ширины экрана. Содержит все пункты меню первого уровня.
- Раскрывающиеся подменю — рядом с каждым родительским пунктом иконка (шеврон вниз или плюс). По тапу на иконку подменю раскрывается с анимацией.
- Кнопка закрытия — крестик в верхнем углу панели.
- Оверлей — затемнение фона при открытом меню. По тапу на оверлей — меню закрывается.
Пример CSS для раскрывающегося подменю:
/* Мобильное подменю — скрыто по умолчанию */
.mobile-menu .sub-menu {
display: none;
padding-left: 16px;
}
/* Раскрытое подменю */
.mobile-menu .sub-menu.is-open {
display: block;
}
/* Иконка раскрытия */
.mobile-menu .menu-item-has-children > .submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: none;
border: none;
cursor: pointer;
}
/* Поворот шеврона при раскрытии */
.mobile-menu .menu-item-has-children.is-open > .submenu-toggle svg {
transform: rotate(180deg);
}Важно: разделяйте ссылку на родительский раздел и кнопку раскрытия подменю. Нажатие на текст «Услуги» — переход на страницу /uslugi/. Нажатие на шеврон — раскрытие списка подуслуг. Если тап на «Услуги» только раскрывает подменю без возможности перейти на страницу раздела — пользователь теряет доступ к родительской странице.
Шаг 3. Обеспечьте доступность (a11y)
Мобильное меню должно быть доступно для пользователей с ограниченными возможностями и для вспомогательных технологий (screen readers). Требования:
- Бургер-кнопка:
aria-label="Открыть меню",aria-expanded="false"(меняется на true при открытии). - Панель меню:
role="navigation",aria-label="Основное меню". - Кнопки раскрытия подменю:
aria-expanded="false",aria-controls="submenu-id". - Фокус: при открытии меню фокус перемещается на первый пункт. При закрытии — возвращается на бургер-кнопку. Tab перемещает фокус по пунктам меню, Escape закрывает меню.
Пример HTML:
<button class="burger-btn" aria-label="Открыть меню"
aria-expanded="false" aria-controls="mobile-nav">
<span class="burger-icon"></span>
</button>
<nav id="mobile-nav" class="mobile-menu" role="navigation"
aria-label="Основное меню" hidden>
<ul>
<li class="menu-item-has-children">
<a href="/uslugi/">Услуги</a>
<button class="submenu-toggle" aria-expanded="false"
aria-controls="submenu-uslugi" aria-label="Раскрыть подменю Услуги">
<svg>...шеврон...</svg>
</button>
<ul id="submenu-uslugi" class="sub-menu" hidden>
<li><a href="/uslugi/seo-audit/">SEO-аудит</a></li>
<li><a href="/uslugi/seo-prodvizhenie/">SEO-продвижение</a></li>
</ul>
</li>
</ul>
</nav>Шаг 4. Настройте Touch Targets
Touch target — это область, реагирующая на нажатие. На мобильных устройствах палец значительно толще курсора мыши. Рекомендации:
- Минимальный размер touch target: 48x48px (рекомендация Google). Apple рекомендует 44x44px. Придерживайтесь 48px для надёжности.
- Минимальный отступ между touch targets: 8px. Если два элемента расположены вплотную — пользователь будет промахиваться.
- Высота пунктов меню: минимум 48px. Оптимально — 52-56px. Это обеспечивает комфортное нажатие даже для крупных пальцев.
CSS для пунктов мобильного меню:
.mobile-menu a {
display: block;
padding: 14px 16px; /* итоговая высота ~48-52px */
min-height: 48px;
font-size: 16px;
line-height: 1.4;
text-decoration: none;
color: #333;
border-bottom: 1px solid #eee;
}Шаг 5. Не скрывайте важные пункты
Частая ошибка — на мобильных скрывают пункты меню, которые «не помещаются». Не делайте этого. Каждый скрытый пункт — это потерянный доступ к странице. Если пунктов много:
- Используйте вертикальный скролл внутри панели меню — мобильное меню может быть длинным, пользователь привык скроллить.
- Сгруппируйте пункты логически — если 20+ пунктов, разбейте на категории с подменю.
- Приоритизируйте порядок — самые важные пункты (услуги, контакты, блог) в начале, второстепенные — ниже.
Обязательно сохраните в мобильном меню: все основные разделы, подразделы с раскрывающимися подменю, контакты (телефон с click-to-call), CTA (кнопка «Заказать», «Оставить заявку»).
Шаг 6. Добавьте CTA и контактную информацию
Мобильное меню — отличное место для конверсионных элементов:
- Кнопка звонка (click-to-call). Ссылка
tel:+7XXXXXXXXXX— один тап, и пользователь звонит. Разместите в верхней части меню. - Кнопка заявки. Ведёт на форму обратной связи или открывает попап с формой. Визуально выделена цветом.
- Мессенджеры. Иконки Telegram, WhatsApp с прямыми ссылками на чат.
Шаг 7. Протестируйте на реальных устройствах
DevTools в Chrome — это симуляция. Реальный тест — на реальном устройстве. Проверьте:
- Смартфон с экраном 360px (Samsung Galaxy, Xiaomi Redmi — массовые модели).
- iPhone (375px, 390px) — своя специфика касания и скролла.
- Планшет (768px) — меню может работать иначе, чем на смартфоне.
- Проверьте с медленным соединением (3G) — меню должно открываться без задержки, потому что оно уже загружено в DOM.
Типичные ошибки
- Скрытые подменю на мобильных. CSS
.sub-menu { display: none !important; }в мобильной версии. Пользователь не видит подразделы, не может перейти на конкретную услугу. Подменю должно быть доступно через раскрывающийся аккордеон. - Тап на родительский пункт только раскрывает подменю. Нажатие на «Услуги» раскрывает подменю, но не даёт перейти на страницу /uslugi/. Решение: разделить ссылку и кнопку раскрытия — текст ведёт на страницу, шеврон раскрывает подменю.
- Слишком маленькие touch targets. Пункты меню высотой 30px — пользователь промахивается, нажимает не тот пункт. Минимум 48px.
- Меню без кнопки закрытия. Пользователь открыл меню и не может его закрыть (нет крестика, нет оверлея). Единственный способ — нажать «Назад» в браузере. Это ломает UX.
- JavaScript-зависимое меню без fallback. Если JavaScript не загрузился (медленное соединение, блокировщик скриптов) — меню не работает совсем. Обеспечьте базовую навигацию через HTML/CSS:
<details>/<summary>или чекбокс-хак. - Меню перекрывает весь контент без возможности скролла. Длинное меню не помещается на экран, но скролл заблокирован. Пользователь не может добраться до нижних пунктов. Обеспечьте скролл внутри панели меню:
overflow-y: auto; max-height: 100vh; - Отсутствие aria-атрибутов. Меню недоступно для screen reader. Пользователи с ограниченными возможностями не могут навигировать по сайту.
Что проверить в итоге
- Бургер-иконка видна и легко нажимается — минимум 48x48px.
- Меню открывается без задержки, с плавной анимацией (до 300ms).
- Все пункты первого уровня доступны в мобильном меню.
- Подменю раскрывается по тапу на шеврон/иконку — не скрыто на мобильных.
- Родительский пункт и кнопка раскрытия подменю — два отдельных элемента.
- Touch targets не менее 48x48px, отступы между пунктами не менее 8px.
- Есть кнопка закрытия (крестик) и оверлей, закрывающий меню по тапу.
- Добавлены aria-атрибуты: aria-expanded, aria-label, aria-controls, role=»navigation».
- В меню есть CTA (звонок, заявка) и контактная информация.
- Меню протестировано на реальных устройствах: Android (360px), iPhone (375-390px), планшет (768px).
- Меню работает при отключённом JavaScript (базовый fallback).
