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.
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
