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

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

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

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

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

Тип элемента
Ссылки меню и редиректа
Цвет текста при наведении
Цвет фона при наведении
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD000--><script> document.addEventListener("DOMContentLoaded", function () { const TCDArraymeny = []; const TiMenuLinks = TCDArraymeny.map(link => { const [menuId, redirectUrl] = link.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.querySelectorAll(`[data-tooltip-hook='${menuId}'], a[href='${menuId}']`); if (!TCelementos.length) return; TCelementos.forEach(element => { const TCDOrigTextColor = getComputedStyle(element).color; const TCDOrigBackgroundColor = getComputedStyle(element).backgroundColor; let resetTimeout; const highlightElement = () => { element.style.color = ""; element.style.backgroundColor = ""; }; const resetTiStyle = () => { clearTimeout(resetTimeout); resetTimeout = setTimeout(() => { const isPopupHovered = Array.from(document.querySelectorAll(`[data-tooltip-hook='${menuId}']`)) .some(popup => popup.matches(":hover")); if (!element.matches(":hover") && !isPopupHovered) { element.style.color = TCDOrigTextColor; element.style.backgroundColor = TCDOrigBackgroundColor; } }, 300); }; element.addEventListener("mouseenter", highlightElement); element.addEventListener("mouseleave", resetTiStyle); TiCodeTildaBlock.forEach(({ blockClass, menuSelector }) => { const popuptiMenus = document.querySelectorAll(`.${blockClass}[data-tooltip-hook='${menuId}'] ${menuSelector}`); popuptiMenus.forEach(popuptiMenu => { popuptiMenu.addEventListener("mouseenter", highlightElement); popuptiMenu.addEventListener("mouseleave", resetTiStyle); }); }); element.addEventListener("click", function (e) { if (redirectUrl) { e.preventDefault(); window.location.href = redirectUrl; } }); }); }); }); </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