Меню в Zero block на Тильда
Необходимо разместить блок T123 из раздела «Другое» и добавить туда код:
.fixed < position: fixed; top: 0; width: 100%; transition: transform 250ms linear; /* время появления/исчезновения меню — 250 мс */ z-index: 998; >.pinned < transform: translateY(0%) >.unpinned
Чтобы фиксация к окну браузера заработала с вашим Zero блоком, вам указать ID вашего блока.
Посмотреть ID блока можно прокрутив в самый низ в «Настройках» блока.
( new ) Вы можете скачать и установить расширение, которое поможет найти id блока ещё быстрее.
Меню второго уровня из Zero-блока по клику или наведению
Есть в интернете несколько инструкций, как сделать меню второго уровня из Zero-блока. Однако во всех подобных инструкциях нужно прописывать ID. А если у вас таких меню несколько? Под каждое нужно писать кучу кода. Бр-р-р.
Предлагаем обойтись универсальным решением, с помощью которого вы сделаете меню из зеро-блока по клику или по наведению, не запутаетесь в ID этих блоков, не будете дублировать кучу одинакового кода, и вообще обойдётесь без болей в попе.
- Создайте кнопки в Zero-блоке, которое будет являться вашим меню, для вызова меню второго уровня.
- Расположите кнопки по слоям, где на нижнем слое будет первая кнопка, на верхнем слое последняя.
- Задайте всем кнопкам класс, например, menu-btn.
- Задайте каждой кнопке собственную ссылку с одинаковым началом, например, #menu1, #menu2, #menu3 и т. д.
- Укажите высоту основного меню (в пикселях).
- Пропишите класс для основного меню (Zero-блока с кнопками), например, uc-menu.
- Создайте и задизайните столько Zero-блоков, сколько меню второго уровня вам нужно.
- Расставьте их в порядке, в котором у вас стоят сами кнопки. Т. е., если кнопка #menu1, вызывающая меню второго уровня № 1 самая первая, то и блок с вызываемым меню второго уровня № 1 должен находиться выше остальных.
- Для каждого блока с меню второго уровня задайте класс, например, uc-menu-sub, отличающийся от остальных классов блоков на сайте.
- Введите все параметры в форму ниже и настройте цвета для активной кнопки
- Скопируйте получившийся код и вставьте его в блок Т123 под все участвующие в модификации блоки.
style> .uc-menu < position: absolute; top: 0; left: 0; z-index: 999999; width: 100%; > .uc-menu-sub .t396__artboard < position: absolute; top: 80px; left: 0; z-index: 999998; opacity: 0; pointer-events: none; transform: translateY(-2000px); transition: opacity .2s ease-in; > .uc-menu-sub .t396__artboard.active < pointer-events: all !important; transform: translateY(0px) !important; opacity: 1; > .menu-btn.active .tn-atom < color: #222222 !important; background-color: #ffcc00 !important; border-color: #ffcc00 !important; > style> script> $(function( ) < let menu = $('.uc-menu'), menuBtn = menu.find('.menu-btn'), menuBtnLink = '#menu', menuSub = $('.uc-menu-sub'), menuSubArtboard = menuSub.find('.t396__artboard'), menuSubWrapper; for (let i=0; i'.t396__elem').wrapAll(''); > menuSubWrapper = $('.menu-sub'); function menuSubOpen(e) < e.preventDefault(); menuBtn.removeClass('active'); menuSubArtboard.removeClass('active'); let n = parseInt($(e.target).attr('href').replace(menuBtnLink, ''), 10) - 1; $(menuBtn[n]).addClass('active'); $(menuSub[n]).find('.t396__artboard').addClass('active'); t_lazyload_update(); > function menuSubClose(e) < e.preventDefault(); menuBtn.removeClass('active'); menuSubArtboard.removeClass('active'); > menuBtn.click(e => menuSubOpen(e)); menuSubWrapper.mouseleave(e => menuSubClose(e)); menuSubArtboard.mouseleave(e => menuSubClose(e)); $(window).scroll(e => menuSubClose(e)); >); script>
Пример работы модификации
Можно посмотреть на отдельной странице
© 2020-curYear Necodim
Инструкции
Личный кабинет
- Заказать разработку
- Контакты
- Публичная оферта
- Политика конфиденциальности
Заказать разработку
Контакты автора
Разработчик: Александр Соловьёв
Email: solowey@necodim.ru
Telegram: @solowey
| Сообщество |
Telegram-канал
Подпишись на Telegram, чтобы быть в курсе новых модификаций. А если есть вопросы, смело задавай их в чатике!
Как создать меню «гамбургер» из 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 видов меню, по каждому написали инструкцию по настройке и дали рекомендации в каких случаях уместно его использование.
Настройка пунктов меню
Пункты в меню можно настроить двумя способами:
1. Прописать название пунктов меню и ссылки вручную
Укажите абсолютную ссылку на страницу, например:
http://mysite.com/about
Либо относительную:
/about
Адреса отдельных страниц задаются в настройках каждой страницы:
Не указывайте внутренний адрес страницы в редакторе Тильды, например:
По этому адресу открыть страницу можете только вы. В меню она работать не будет.
2. Воспользоваться помощником для расстановки ссылок
Наведите мышку на пункт меню. Вы увидите два варианта, как можно поставить ссылку: «Выбрать страницу» и «Выбрать блок».
Если нажать «Выбрать страницу», то появится список страниц вашего сайта. Кликайте на нужную страницу и ссылка поставится автоматически.
Если нужно поставить ссылку к блоку на странице, нажмите «Выбрать блок». Вы переместитесь на страницу для выбора блока. Кликните в тот блок, к которому должен быть совершен переход, при нажатии на пункт меню и ссылка поставится автоматически.
Как сделать меню сразу для всех страниц
Чтобы сделать меню сразу для всех страниц проекта (сайта), создайте пустую страницу, добавьте на нее блок меню и настройте его. Затем перейдите в настройки сайта, на вкладку «Шапка и подвал» и назначьте эту страницу как Header. Нажмите «Опубликовать все страницы».
Меню для перемещения внутри одной страницы
Чтобы сделать меню для навигации внутри страницы, пропишите в ссылках номера блоков (ссылка будет выглядеть как #rec586533845), на которые должны переходить пользователи по нажатию на пункт меню. Номер каждого блока указан в настройках блока.
Чтобы сделать меню для навигации внутри страницы, пропишите в ссылках номера блоков (ссылка будет выглядеть как #rec586533845), на которые должны переходить пользователи по нажатию на пункт меню. Номер каждого блока указан в настройках блока.
Если вы хотите, чтобы в ссылке был не номер блока, а название раздела, используйте якорные ссылки.
Чтобы переход по странице был плавным, добавьте модификатор «Плавный скрол до локальной якорной ссылки». Это блок Т178 в категории «Другое».
Меню для двуязычного сайта
Чтобы сделать двуязычный сайт, создайте два проекта. Обычно удобно сделать сначала версию на одном языке, а потом скопировать проект и перевести на другой язык.
Настройте «шапку» в обоих проектах, добавив в нее блок меню, в котором есть настройка языков: ME204, МЕ301, ME302, ME303, ME304, ME401, МЕ402, МЕ403. В содержании блока укажите языки и ссылки на проекты.
Как сделать второй уровень меню
Создать меню второго уровня можно двумя способами:
1. Добавить подпункты меню в основном блоке
Добавьте на страницу блок меню.
Перейдите в Контент блока → Список пунктов меню → нажмите «Добавить пункты второго уровня» — слева появятся иконки «+» .
Чтобы добавить второй уровень, нажмите на «+», укажите заголовок подпункта и его ссылку. Нажмите на «+» несколько раз, чтобы добавить необходимое количество подпунктов.
Нажимайте на иконку «+», чтобы увеличить количество подпунктов.
Опубликуйте страницу и посмотрите как выглядит меню второго уровня.
На десктопных устройствах второй уровень меню отображается в виде выпадающего списка при наведении курсора, на мобильных открытие происходит по тапу.
Важно : основной пункт, для которого используется подменю, не будет кликабельным при наличии подпунктов. Если нужно, чтобы он был активен, продублируйте его заголовок и ссылку в меню второго уровня.
Чтобы подсказать посетителям сайта пункты меню, в которых есть второй уровень, включите иконку в Настройках блока меню → Настройки подменю → Показывать иконку меню второго уровня.
2. Использовать блок ME601/ME601A
Добавьте на страницу любой блок меню — это будет меню первого уровня. Затем добавьте блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке МЕ601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus