Как сделать выпадающее меню в Тильде: второй уровень

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

Выберите стандартное меню

В справке Тильды описано два штатных способа второго уровня: добавить подпункты в основном блоке меню или использовать отдельный блок ME601/ME601A (Как сделать меню сайта^[1]).

Для одного уровня подпунктов удобнее основной блок: структура остаётся в одном месте, а поведение описано в документации. Справочный центр прямо указывает, что на десктопных устройствах второй уровень отображается в виде выпадающего списка при наведении курсора, на мобильных открытие происходит по тапу (Как сделать меню сайта^[1]).

Отдельный блок ME601 нужен, когда основной блок меню уже стоит на странице, а подразделы удобнее вынести в связанный блок. Логика связи описана через одинаковую ссылку вида #submenu:more в обоих блоках (Как сделать меню сайта^[1]). Это запасной вариант, если основной блок по каким-то причинам не подходит под макет шапки.

Мой выбор для типового сайта — основной блок. Он требует меньше согласований между двумя блоками и меньше мест, где можно ошибиться в ссылках. Zero Block и пользовательский JavaScript в этой задаче не нужны.

Добавьте пункты второго уровня

Порядок по справке: добавьте на страницу блок меню, откройте «Контент» → «Список пунктов меню» → нажмите «Добавить пункты второго уровня», после чего слева появятся иконки «+». Нажатие на «+» добавляет подпункт, где нужно указать заголовок и ссылку (Как сделать меню сайта^[1]).

Ссылку можно прописать вручную — абсолютную вида https://mysite.com/about или относительную /about — либо поставить помощником: «Выбрать страницу» открывает список страниц сайта, «Выбрать блок» ставит переход к блоку на странице (Как сделать меню сайта^[1]).

Есть ограничение, которое экономит время: внутренний адрес из редактора Тильды, например https://tilda.cc/page/?pageid=…, в меню работать не будет — по нему страницу открывает только автор (Как сделать меню сайта^[1]). Проверяйте, что в поле стоит адрес опубликованной страницы или относительный путь.

Если хотите подсказать посетителям, что у пункта есть подменю, включите иконку в «Настройках блока меню» → «Настройки подменю» → «Показывать иконку меню второго уровня» (Как сделать меню сайта^[1]).

Проверьте меню на двух экранах

После настройки опубликуйте страницу и посмотрите на результат в двух режимах: на компьютере второй уровень раскрывается при наведении, на телефоне — по тапу (Как сделать меню сайта^[1]).

Проверка складывается из трёх шагов:

На десктопе наведите курсор на пункт с подпунктами — список должен раскрыться и не перекрывать соседние пункты.
На телефоне откройте меню и тапните по пункту с подпунктами — должен появиться второй уровень. Затем проверьте переход по каждой ссылке.
Пройдите по каждой ссылке подпункта и убедитесь, что открывается нужная опубликованная страница, а не редактор Тильды.

Тап на сенсорном экране — отдельный сценарий: не рассчитывайте, что подменю откроется от наведения, как на десктопе.

Учебный пример навигации

Учебный пример

Условия примера: главное меню из двух пунктов — «Программы» и «Контакты». В «Программы» нужны два подпункта: «Маркетинг» со ссылкой /marketing и «Аналитика» со ссылкой /analytics. «Контакты» ведут на /contacts. Все три страницы уже опубликованы.

Исходная структура, которую нужно получить в блоке меню:

Пункт	Родитель	Ссылка	Уровень
Программы	—	—	1
Маркетинг	Программы	/marketing	2
Аналитика	Программы	/analytics	2
Контакты	—	/contacts	1

Последовательность настройки:

Добавьте блок меню и откройте «Контент» → «Список пунктов меню».
Создайте пункт «Программы».
Нажмите «Добавить пункты второго уровня» и поставьте «+» у пункта «Программы».
В первом подпункте укажите заголовок «Маркетинг» и ссылку /marketing, во втором — «Аналитика» и /analytics.
Добавьте отдельный пункт «Контакты» со ссылкой /contacts.
Включите иконку второго уровня в «Настройках подменю», чтобы посетитель видел, что у «Программ» есть вложенные пункты.
Опубликуйте страницу.

Заполненный результат в списке пунктов меню:

Пункт	Ссылка	Подпункты
Программы	—	Маркетинг → /marketing; Аналитика → /analytics
Контакты	/contacts	нет

Проверка ожидаемого результата: на компьютере при наведении на «Программы» появляются «Маркетинг» и «Аналитика»; на телефоне они открываются по тапу. Переход по /marketing, /analytics и /contacts открывает соответствующую опубликованную страницу, а не редактор Тильды.

Если какой-то переход ведёт в редактор, вернитесь в список пунктов меню и замените внутренний адрес на относительный путь или адрес опубликованной страницы. Если подменю не раскрывается на телефоне, проверьте, что оно добавлено именно через «Добавить пункты второго уровня», и переопубликуйте страницу.

Дополнительные вопросы по разметке и служебным страницам закрывают материалы о FAQ для сайта с нейросетью и о замене фавикона в Тильде.