Блог Perkova&Perkova

Вложенное меню на Tilda: как не спрятать важные страницы

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

Составьте полезную группу

В учебном примере у вымышленной студии несколько услуг. Верхний пункт «Услуги» раскрывает «Сайт компании», «Интернет-магазин», «Доработка сайта» и «Все услуги». Последний пункт нужен, если человек хочет сначала сравнить направления, а не сразу выбрать одну страницу.

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

Добавьте второй уровень в основном меню

  1. Откройте «Контент» меню и раздел «Список пунктов меню».
  2. Нажмите «Добавить пункты второго уровня».
  3. У нужного родительского пункта нажмите появившийся плюс и заполните название подпункта и публичную ссылку.
  4. Повторите добавление для остальных страниц группы.
  5. Добавьте внутри группы «Все услуги» со ссылкой на обзор, если нужен переход к родительскому разделу.
  6. Сохраните и опубликуйте страницу.

По документации Tilda родительский пункт при такой настройке становится раскрывающим элементом и сам не открывает страницу. Поэтому нельзя оставить единственную ссылку на обзор только в родителе: продублируйте её отдельным подпунктом.

Альтернатива: отдельный ME601

Если используете отдельное меню второго уровня ME601, задайте в нём адрес привязки, например #submenu:services. Такой же адрес укажите у пункта «Услуги» в основном меню. Затем заполните страницы в самом подменю. Строки привязки должны совпадать; они связывают блоки, а не обозначают обычный раздел статьи.

Не смешивайте два способа для одного пункта без проверки. Отдельные подменю должны иметь разные имена привязки, иначе раскрытие может показывать не ту группу.

Проверьте мышь, касание и клавиатуру

На компьютере откройте группу и переместите курсор к последнему подпункту. Панель не должна закрываться на пути. На телефоне раскрывайте её касанием, затем выберите страницу и вернитесь назад. В документации для мобильной версии описано раскрытие по тапу.

Проверьте, видны ли все подпункты при маленькой высоте экрана. С клавиатуры проверьте доступ к родителю и дочерним ссылкам. Если конкретный блок не обеспечивает требуемый сценарий, выберите более простую структуру или подходящий блок, а не объявляйте проблему решённой по внешнему виду.

  • Обзор больше не открывается: добавьте отдельный подпункт родительской страницы.
  • Раскрывается чужая группа: проверьте совпадения адресов #submenu:.
  • На телефоне список не помещается: сократите верхний уровень или перераспределите задачи по обзорным разделам.
  • Подпункт ведёт на 404: проверьте его фактическую публикацию и URL.

Дальше помогут мобильное меню и хлебные крошки. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.

Практика Tilda