Модификации

Как cделать кликабельные пункты меню, у которых есть выпадающие подпункты в Tilda

2025-11-24 21:24 Меню

Инструкция

По умолчанию в Tilda, если добавить к пункту меню выпадающий список (подменю), сам родительский пункт перестает быть кликабельным и работает только как кнопка раскрытия списка. Данная модификация делает такие пункты активными ссылками:
1. Создайте основное меню и добавьте к нужным пунктам выпадающее подменю через блок ME601B.
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>