Инструкция
По умолчанию в Tilda, если добавить к пункту меню выпадающий список (подменю), сам родительский пункт перестает быть кликабельным и работает только как кнопка раскрытия списка. Данная модификация делает такие пункты активными ссылками:
1. Создайте основное меню и добавьте к нужным пунктам выпадающее подменю через блок ME601B.
2. В настройках меню («Контент» → «Список пунктов меню») в поле «Ссылка» для таких пунктов пропишите специальные «якорные» ссылки. Пример: #submenu:catalog, #submenu:services, #submenu:about.
3. Добавьте на страницу (лучше в хедер) HTML‑блок T123 и вставьте в него код ниже.
4. В самом начале кода (в переменной linkSubt978) настройте соответствие между вашими якорными ссылками и реальными адресами страниц, куда должен вести переход.
2. В настройках меню («Контент» → «Список пунктов меню») в поле «Ссылка» для таких пунктов пропишите специальные «якорные» ссылки. Пример: #submenu:catalog, #submenu:services, #submenu:about.
3. Добавьте на страницу (лучше в хедер) HTML‑блок T123 и вставьте в него код ниже.
4. В самом начале кода (в переменной linkSubt978) настройте соответствие между вашими якорными ссылками и реальными адресами страниц, куда должен вести переход.
Например, строчка «#submenu:catalog»: «/catalog», обозначает то, что если ссылка в пункте меню стоит #submenu:catalog, то при нажатии на этот пункт переходим на /catalog.
Дополнительно:
На десктопе (ПК): клик по пункту сразу переводит на нужную страницу.
На мобильных устройствах: первый клик открывает подменю, а второй клик по этому же пункту осуществляет переход по ссылке.
<!-- Скрипт, который делает кликабельные пункты меню, у которых есть выпадающие подпункты на Tilda с сайта bulgkate.ru -->
<script>
$(document).ready(function() {
var linkSubt978 = {
"#submenu:catalog": "/catalog",
"#submenu:services": "/services",
"#submenu:partners": "/partners",
"#submenu:about": "/about"
};
function isDesktop() {
return window.matchMedia('(min-width: 980px)').matches;
}
function initMenuLinks() {
var $links = $('.t978__tm-link');
$links.each(function() {
var $link = $(this);
var href = $link.attr('href');
var fin = linkSubt978[href];
if (fin) {
$link.attr('data-link-href', fin);
}
});
$links.off('.menuCustom');
$links.on('click.menuCustom', function(e) {
var $link = $(this);
var finUrl = $link.attr('data-link-href');
if (!finUrl) return;
if (isDesktop()) {
e.preventDefault();
document.location = finUrl;
return;
}
var wasOpened = $link.data('submenuOpenedOnce') === true;
if (!wasOpened) {
// Первый тап по пункту с подпунктами:
// - даем Тильде обработать клик и открыть подменю
// - отмечаем этот пункт как "тапали один раз"
$('.t978__tm-link').not($link).each(function() {
$(this).removeData('submenuOpenedOnce');
});
$link.data('submenuOpenedOnce', true);
return;
} else {
// Второй тап по тому же пункту -- уже идём на страницу
e.preventDefault();
document.location = finUrl;
}
});
}
setTimeout(initMenuLinks, 800);
$(window).on('resize', function() {
setTimeout(initMenuLinks, 300);
});
});
</script>