Мобильное меню должно помогать выбрать раздел на маленьком экране. Если перенести в него каждую ссылку из подвала и каждую статью, посетитель получит длинный список вместо ориентиров. Сокращайте верхний уровень по задачам, сохраняя доступ к вложенным страницам через разделы.
Сначала сгруппируйте содержание
В учебном примере студия показывает услуги, проекты, обучение, статьи и контакты. На верхнем уровне остаются эти пять направлений. Отдельные статьи доступны через блог, конкретные проекты — через портфолио. Это сокращение списка переходов, а не удаление страниц сайта.
Проверьте названия: «Обучение» понятнее, чем «Развивайся», а «Проекты» точнее, чем «Вдохновение», если внутри находятся выполненные работы. У каждой группы должен быть доступный обзорный раздел. Не прячьте единственный способ обратиться в случайный подпункт.
Настройте мобильный вариант
- Откройте «Контент» блока меню и составьте короткий список основных пунктов. Ссылки ставьте на публичные страницы или их относительные пути.
- Если выбранный блок уже поддерживает раскрытие на телефоне, используйте его мобильные настройки и проверьте итоговую панель после публикации.
- Если нужны разные композиции, добавьте отдельный блок меню «гамбургер» из категории «Меню».
- В настройках видимости оставьте обычное меню для широких экранов, а мобильное — для узких. Такой способ описан в официальной инструкции по дизайну меню.
- Согласуйте диапазоны: на пограничной ширине не должно появляться два меню или исчезать оба. Затем опубликуйте используемые страницы.
Не заменяйте готовое раскрывающееся меню одной нарисованной иконкой без действия. Три полоски должны открывать навигацию, а кнопка закрытия — возвращать к странице. В собственной реализации дополнительно проверяют клавиатуру и доступные названия элементов.
Проверяйте раскрытое состояние
Откройте меню на телефоне в вертикальном положении. Последний пункт и закрытие должны оставаться достижимыми; если список выше экрана, проверьте его прокрутку. Нажмите раздел, дождитесь загрузки и убедитесь, что попали в ожидаемую страницу. Для якоря проверьте закрытие панели после перехода.
Повторите проверку на внутренней статье и странице услуги. Общая шапка может содержать ссылки-якоря, которые существуют только на главной. Для общего меню такой переход должен включать адрес страницы, например /#contacts, если этот якорь действительно задан на главной.
Что исправлять при сбое
- Меню перекрывает форму: проверьте его высоту, слои и закрытие.
- Пункт ведёт в редактор: замените внутренний адрес Tilda публичной ссылкой.
- Два меню рядом: исправьте пересечение диапазонов видимости.
- После обновления различаются списки: синхронизируйте отдельные мобильную и настольную версии.
Порядок пунктов полезно проверять на человеке, который не собирал сайт: предложите найти курс и контакт. По его действиям видно, какое название непонятно. Не нужно заранее назначать универсальное «идеальное количество» пунктов.
Продолжите с настройкой общего меню и вложенной навигации. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.