URL скопирован в буфер обмена!

Как назначить вторую ссылку на кнопку которая вызывает меню ME601?

С помощью этой модификации можно настроить ссылки для элементов которые показывают меню ME601, ME601A и ME601B. При наведении на кнопку будет показывать меню, а при клике открывать указанную страницу. Дополнительно можно настроить ховер для кнопки которая вызывает меню.

Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block
Номер модификации в библиотеке TiCode

Генератор кода

Тип элемента
Ссылки меню и редиректа
Цвет текста при наведении
Цвет фона при наведении
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD097--><script> document.addEventListener("DOMContentLoaded", function () { const TCDArraymeny = []; const TiMenuLinks = TCDArraymeny.map(link => { const [menuId, redirectUrl] = link.trim().split(" "); return { menuId, redirectUrl }; }); const TiCodeTildaBlock = [ { blockClass: "t794", menuSelector: ".t794__tooltip-menu" }, { blockClass: "t795", menuSelector: ".t795__popup" }, { blockClass: "t966", menuSelector: ".t966__tooltip-menu" }, { blockClass: "t978", menuSelector: ".t978__tooltip-menu" } ]; TiMenuLinks.forEach(({ menuId, redirectUrl }) => { const TCelementos = document.querySelector(`[data-tooltip-hook='${menuId}'], a[href='${menuId}']`); if (!TCelementos) return; const TCDOrigTextColor = getComputedStyle(TCelementos).color; let resetTimeout; const highlightElement = () => { TCelementos.style.color = ""; TCelementos.style.backgroundColor = ""; }; const resetTiStyle = () => { clearTimeout(resetTimeout); resetTimeout = setTimeout(() => { const isPopupHovered = document.querySelector(`[data-tooltip-hook='${menuId}']:hover`); if (!TCelementos.matches(":hover") && !isPopupHovered) { TCelementos.style.color = TCDOrigTextColor; } }, 300); }; TCelementos.addEventListener("mouseenter", highlightElement); TCelementos.addEventListener("mouseleave", resetTiStyle); TiCodeTildaBlock.forEach(({ blockClass, menuSelector }) => { const popuptiMenu = document.querySelector(`.${blockClass}[data-tooltip-hook='${menuId}'] ${menuSelector}`); if (popuptiMenu) { popuptiMenu.addEventListener("mouseenter", highlightElement); popuptiMenu.addEventListener("mouseleave", resetTiStyle); } }); TCelementos.addEventListener("click", function (e) { if (redirectUrl) { e.preventDefault(); window.location.href = redirectUrl; } }); }); }); </script> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
КОПИРОВАТЬ КОД
1. Создаем в Zero Block текст или кнопку и указываем ссылку для открытия меню ME601, ME601A или ME602B. В генераторе в поле "Тип элемента" указываем элемент, который создали. Например, если у вас меню показывается при наведении на кнопку, то выбираем - кнопка;

2. В поле "Ссылки меню и редиректа" указываем ссылку по которой у вас открывает меню второго уровня и ссылку на которую нужно перенаправить если кликнем по кнопке, в формате "#submenu:more /about" В этом примере при наведении на кнопку покажет меню, а при клике перенаправит на страницу /about
Можно указывать полный адрес сайта, например "#submenu:more https://ticode.dev" В этом случае при наведении покажет меню, а при клике перенаправит на сайт https://ticode.dev
Если у вас несколько кнопок и на каждую нужно показывать свое меню и настроить свой редирект при клике, то указываем в таком формате "#submenu:more /about", "#submenu:more2 /cost"
Если вам не нужно открывать страницу при клике, то указываем в таком формате "#submenu:more", "#submenu:more2 /cost" В этом случае при наведении на первую кнопку покажет меню, но при клике редиректа не будет;

3. Дополнительно в генераторе можно указать цвет текста и фона(если это кнопка) при наведении на пункт меню. Скрипт будет подсвечивать текст и фон даже если курсор уже на плашке меню второго уровня;

4. Копируем готовый код и вставляем в HTML блок Т123.
FAQ
Пример меню без модификации
  • Нет возможности назначить ссылку с редиректом при клике на пункт меню "MORE"
  • Ховер эффект с пункта меню пропадает как только навели курсор на меню второго уровня
LOGO
Callback
Пример меню с установленной модификацией
  • При наведении на "MORE" показывает меню второго уровня, а при клике открывает страницу https://ticode.dev
  • Ховер эффект сохраняется в момент когда курсор наведен на плашку меню второго уровня
LOGO
Callback
FAQ

Модификация работает только на десктопах. Чтобы посмотреть пример, откройте страницу на пк

Made on
Tilda