Как сделать меню в тильде
Автор:
Кирилл Сатулин
Просмотров:
3 382
Время прочтения:
10 мин.
Как сделать меню второго уровня на Тильде
Подробное описание способа добавления удобной навигации, со всеми кликабельными пунктами меню
Друзья, смотрите сразу видео, оно более актуальное на данный момент
УСЛУГИ
Делаем предварительные настройки
Устанавливаем и проверяем обновления Annexx
Теория Как в Тильде сделать многоуровневое (выпадающее) меню
Сколько уровней навигации у вас будет
Практика: Делаем многоуровневое меню
Видео: Настройка многоуровневого меню
Делаем предварительные настройки
- Google Chrome
- Яндекс.Браузер
- OPERA
- MICROSOFT EDGE
Далее, нужно залогиниться в нем
Проверьте, чтобы была установлена последняя версия
На расширении, клик правой кнопкой мыши, Настройки
Нажимаете кнопку Обновить и ждете
Не забывайте, что нужно правильно спроектировать меню и навигацию на сайте
О правильном проектировании меню, я рассказывал в статье о создании интернет-магазина на Тильде
Как в Тильде сделать многоуровневое (выпадающее) меню
Для начала нам нужно понять, какой блок для меню будем использовать в шапке
Я использую блоки начиная от ME103 до ME301 — ME303A для десктопа. Для мобильной версии, мой любимый блок ME 403. Кстати, про работу с моб меню и адаптацией, я писал в этой статье
На примере моего блога. Здесь я меню сделал с помощью zero блока
На этом сайте, для меню я использовал блок ME 103
Важный момент при выборе блока для меню, это сколько уровней навигации у вас будет
Я работаю с сайтами, у которых, по-умолчанию, будет (или есть) огромная структура. Я собираю все направления ниши и реализую ее на сайте. Это дает хороший рост в поиске. Ниже пример, структуры ателье.
В итоге, мне иногда, даже не хватает функционала меню конструктора, для проектирования сложного меню
Я стараюсь совмещать блоки ME103 до ME 303A с ME601A ME601B.
Так можно реализовать максимальный уровень вложенности
Если вам достаточно двухуровневого меню, то можете использовать только один блок меню. А внутри уже сделать подветки (подуровни)
Как создать меню «гамбургер» из ZeroBlock в полноэкранном режиме в Tilda
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Связаться с нами
Задать вопрос
Купить шаблон
Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)
Заказать установку примера
Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.
Как сделать меню в тильде
В статье мы рассмотрели 10 видов меню, по каждому написали инструкцию по настройке и дали рекомендации в каких случаях уместно его использование.
Материал посвящен дизайну меню — то, как меню работает и как оно выглядит. Если вам нужно разобраться как вообще создать меню сайта, добавить меню сразу на все страницы или сделать навигацию внутри страницы, пожалуйста прочитайте статью:
Как сделать меню сайта
Меню — набор ссылок на другие страницы сайта, либо на конкретные разделы одной страницы. Каждая ссылка — пункт меню. Меню необходимо для навигации: перехода между страницами или между разделами одной страницы.
Общие рекомендации
Меню должно помогать посетителю быстро найти необходимую информацию.
Меню должно быть лаконичным.
Пунктов меню не должно быть слишком много.
Оптимальное количество пунктов меню — 5 или меньше.
Названия пунктов меню лучше делать из одного слова.
Хорошо, если слова будут не слишком длинные.
Меню не должно быть тяжеловесным и отнимать внимание от контента.
Примеры хороших меню
Описание картинки
Прозрачное статичное меню поверх обложки
Как себя ведет:
Всегда находится вверху страницы, не отвлекает от содержания, при необходимости пользователь может легко к нему обратиться, так как оно расположено в привычном месте.
Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%
Посмотреть страницу с меню в браузере
Фиксированное меню
Как себя ведет:
Меню, которое всегда находится в поле зрения пользователя и он может обратиться к нему на любом месте на странице. У такого меню чаще всего прозрачный фон в начале страницы (на обложке), который меняется на непрозрачный во время скрола.
Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:
Основные настройки → Поведение позиционирования → Фиксация при скролле
Фон меню → Цвет фона меню — на выбор
Фон меню → Непрозрачность фона меню — 0%
Фон меню → Непрозрачность фона меню после начала скролла — 80%
Посмотреть страницу с меню в браузере
Два разных меню: одно вверху страницы, другое появляется при скролле
Как себя ведет:
Вариант, похожий на предыдущий, только при скролле появляется меню с другим содержимым. Например, в начале страницы меню содержит логотип, пункты (ссылки на разделы сайта) и ссылки на социальные сети. А когда пользователь начинает пролистывать страницу, появляется и остается в поле зрения меню с логотипом, призывом к действию и кнопкой обратного звонка.
Добавить на страницу два блока ME301. И задать им следующие параметры:
Первое меню (остается на обложке)
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%
Второе меню (появляется при скролле)
Основные настройки > Поведение позиционирования — Фиксация при скролле
Основные настройки > Появление меню при прокрутке через N пикселей — 600px
Фон меню > Цвет фона меню — на выбор
Фон меню > Непрозрачность фона меню — 70%
Первое меню
Первое меню
Второе меню
Второе меню
Посмотреть страницу с меню в браузере
Меню «гамбургер»
Как себя ведет:
Меню в виде трех полосок в углу экрана, при клике на которое раскрывается полная версия.
Для чего используется:
В случаях, когда необходимо, чтобы отвлекающие элементы были сведены к минимуму и внимание пользователя было обращено только к контенту. Довольно часто меню «гамбургер» используется в мобильных версиях сайта. Например, можно добавить обычное меню и назначить ему видимость «только для компьютера», затем добавить меню «гамбургер» и назначить ему видимость «только для мобильных».
Как настроить видимость блока только для мобильных устройств
Добавить на страницу блок ME401/402/403/404/405, настроить поведение позиционирования, цвет иконки меню и цвет фона самого меню и цвет фона для пунктов меню. В нашем примере параметры будут следующими:
Основные настройки → Поведение позиционирования — Фиксация при скролле
Иконка меню → Цвет — черный
Фон меню → Цвет фона закрытого меню — прозрачный
Фон меню→ Цвет фона открытого меню — белый
Посмотреть страницу с меню в браузере
Многоуровневое меню
Как себя ведет:
При клике на пункт меню появляется выпадающий список вложенных пунктов.
Для чего используется:
В объемных сайтах со сложной структурой.
Добавить пункты подменю у основного блока или использовать сочетание меню ME301(или любого другого с пунктами меню) и ME601.
Пункты подменю основного блока
Добавить на страницу любой блок меню, который содержит пункты меню.
Перейти в Контент блока → Список пунктов меню → нажать «Добавить пункты второго уровня» — напротив пунктов меню появятся иконки в виде символа плюс.
Нажать на иконку плюса напротив пункта к которому нужно добавить пункт второго уровня. Заполнить появившиеся поля названия пункта и его ссылку.
Чтобы добавить новый пункт подменю, нажмите на иконку плюса ещё раз.
Подпункты меню будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Блок ME601
Добавить на страницу блок ME301, настроить меню, как в примерах выше и добавить блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке ME601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus
Меню на Тильде в Zeroblock
У Тильды есть десятки блоков меню, однако у них стандартный функционал: логотип, пункты меню, соцсети, кнопку, описание. Но часто перед дизайнерами встают нестандартные задачи, например вставить иконки, написать 2 номера телефона и т.д. С ростом популярности платформы стало появляться много дополнительных возможностей, которые реализуются с помощью html кода, вставленного в контент сайта.
HTML-код фиксированного меню
HTML-код фиксированного меню, которое появляется при прокрутке
.fixed < position: fixed; top: 0; width: 100%; transition: transform 250ms linear; /* время появления/исчезновения меню — 250 мс */ z-index: 99999; >.pinned < transform: translateY(0%) >.unpinned
HTML-код меню-гамбургера на zero-блоке
Необхоимо создать блок меню ME403 с заданной шириной. Затем создать Zero-блок с выравниванием всех элементов в контейнере относительно «window». В поле с кодом вставить номер Zero-блока и ширину, которую мы задали в меню-гамбургере. Следите, что все элементы в Zero-блоке правее границы в указанные вами количество пикселей будут не видны при открытии меню.
.t451m__container < padding: 0px !important;>.t451m .t451m__close < background-color: transparent;>.t451m__close_icon span
Если вы front-end или back-end разработчик, то с легкостью добавите необходимые функции к этому коду. В выпадающем меню на Tilda нельзя выделить пункты при наведении. Это тоже решается с помощью html-кода.
Иногда стандартного выпадающего меню недостаточно. Хочется сделать выпадающие блоки на всю ширину экрана с произвольным расположением пунктов меню.
/*Настройка высоты вкладок */ .t228__list_item < height: 80px; display: inline-block !important; padding: 0 15px !important; >/*Настройка вкладок */ .t228 .t-menu__link-item < height: inherit; display: table-cell !important; vertical-align: middle; >/*Цвет вкладок при наведении */ .t228__list_item:hover < background:#171717; -webkit-transition: all 0.35s; transition: all 0.35s; >/*Настройка для блока FT302 */ [data-record-type="420"] < position: fixed; width: 100%; top: 80px; z-index: 990; left: 0; opacity: 0; -webkit-transition: all 0.35s; transition: all 0.35s; visibility: hidden; background: linear-gradient(to bottom, #171717 45%, #484848); >/*Появление меню при наведении на вкладку */ .t228__list_item:hover .mainmenu
Материал я собрала с 4 разных сайтов для своего удобства и для удобства дизайнеров, которые будут пользоваться ими.