Кнопка
Сверяем тип элемента, активную область, aria-expanded, aria-controls и доступное название.
Навигация
Не работает меню на сайте
Воспроизводим сбой на нужной ширине экрана, проверяем кнопку, слои, CSS, JavaScript и ссылки. Возвращаем пользователю предсказуемую навигацию мышью, касанием и клавиатурой.
Диагностика
Почему навигация
перестаёт отвечать
Внешне одинаковый сбой может возникать в разных слоях. Мы проверяем фактическое нажатие, изменение состояния, расположение панели и переход по ссылке, а не увеличиваем z-index наугад.
JavaScript
Проверяем загрузку скрипта, ошибки консоли, повторные обработчики и конфликт с темой или виджетом.
Слои
Ищем невидимые перекрытия, новый stacking context, неверный z-index и панель за пределами экрана.
Адаптивность
Тестируем контрольные ширины, поворот телефона, смену display и классы, которые должны открывать панель.
Прокрутка
Проверяем блокировку body, возврат позиции, высоту панели и доступность пунктов внизу списка.
Ссылки и фокус
Сверяем адреса и якоря, порядок Tab, видимый фокус, Enter, Space, Escape и возврат к кнопке.
Диагностика навигации
Почему меню перестаёт работать
Кнопка может реагировать на клик, но список остаётся под другим слоем, закрывается сразу или недоступен с клавиатуры. Проверяем поведение, стили и разметку вместе.
JavaScript-события
Ищем ошибку в консоли, двойное подключение обработчика и конфликт библиотек. Проверяем, не закрывает ли меню глобальный обработчик клика раньше открытия.
Слои и прокрутка
Сравниваем z-index, stacking context, overflow и position у шапки и соседних блоков. Исправляем источник перекрытия, а не назначаем случайно большое число.
Адаптивный режим
Тестируем точки перелома, поворот экрана, длинные названия и вложенные пункты. Меню не должно уходить за край или оставлять страницу заблокированной после закрытия.
Клавиатура
Проверяем Tab, Enter, Escape, видимый фокус и корректные aria-атрибуты. Ссылка остаётся ссылкой, а раскрывающий элемент получает состояние открытия.
Контроль результата
Как принимаем новое меню
Какие сценарии обязательны?
Открытие и закрытие мышью, касанием и клавиатурой; переход по ссылкам; возврат назад; прокрутка длинного списка. Проверяем главную, внутреннюю страницу и состояние авторизованного пользователя, если оно меняет шапку.
Что происходит без JavaScript?
Если архитектура позволяет, основные ссылки остаются доступными. Когда без скрипта раскрытие невозможно, пользователь всё равно должен получить прямой путь к разделам через страницу услуг или карту навигации.
Что фиксируем после работы?
Передаём изменённые файлы, используемые точки перелома и правила для новых пунктов. Проверяем, что правка не изменила высоту шапки, не создала горизонтальную прокрутку и не ухудшила скорость первой загрузки.
Результат
Посетитель может перейти в нужный раздел
Меню открывается
Кнопка меняет состояние один раз, а панель видна поверх нужной части интерфейса.
Пункты доступны
Ссылки нажимаются, получают фокус и не скрываются за границами экрана.
Страница восстанавливается
После закрытия возвращаются прокрутка, фокус и привычное управление контентом.
Контрольный сценарий
Проверяем не только открытие панели
Пример навигации W3C показывает связь кнопки, состояния раскрытия и управления с клавиатуры. Конкретная реализация зависит от структуры сайта, но пользовательский сценарий должен оставаться понятным.
До открытия
Кнопка заметна, имеет понятное название и доступна без точного попадания в маленькую иконку.
В открытом состоянии
Панель не обрезается, активное состояние объявлено, а фон не перехватывает действия.
При переходе
Ссылка ведёт по ожидаемому адресу, якорь не прячется под шапкой и меню закрывается корректно.
После закрытия
Escape, повторное нажатие или выбор пункта возвращают управление странице без зависшей блокировки.
Границы работ
Когда нужен доступ к теме или конструктору
Если меню создаёт закрытый модуль CMS, внешний виджет или конструктор, исправление может зависеть от доступных настроек и обновления поставщика. Перед изменением общего шаблона делаем резервную копию и проверяем тестовый контур. Мы не удаляем пункты, не меняем структуру разделов и не перестраиваем навигацию без согласования: ремонт поведения и информационная архитектура — разные задачи.
Вопросы
Перед исправлением
Почему меню не открывается?
Проверяем, получает ли кнопка нажатие, запускается ли скрипт и меняются ли классы и атрибуты раскрытия.
Почему ошибка только на телефоне?
На мобильной ширине включается отдельная панель и блокировка прокрутки, поэтому десктопная версия может оставаться исправной.
Нужен полный редизайн?
Нет, если существующая структура подходит. Локальную ошибку разметки, CSS или JavaScript можно исправить отдельно.
Что проверяется после ремонта?
Ссылки, раскрытие и закрытие, несколько ширин, поворот телефона, клавиатура, фокус и прокрутка.
Первый шаг
Покажите неработающее меню
Пришлите URL, устройство, браузер и действие, после которого возникает сбой. Если проблема зависит от авторизации, опишите доступный тестовый сценарий.