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.
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.
Пример меню без модификации
- Нет возможности назначить ссылку с редиректом при клике на пункт меню "MORE"
- Ховер эффект с пункта меню пропадает как только навели курсор на меню второго уровня
LOGO
Callback
Пример меню с установленной модификацией
- При наведении на "MORE" показывает меню второго уровня, а при клике открывает страницу https://ticode.dev
- Ховер эффект сохраняется в момент когда курсор наведен на плашку меню второго уровня
LOGO
Callback
