Как cделать кликабельные пункты меню первого или второго уровня в Tilda

2026-04-06 09:29 Меню

Инструкция

По умолчанию в Tilda, если у пункта есть подменю, он перестаёт быть ссылкой. Эта модификация возвращает кликабельность как для первого, так и для второго уровня.

1. Создайте основное меню и добавьте к нужным пунктам выпадающее подменю через блок ME601B.
2. В настройках меню («Контент» → «Список пунктов меню») для пунктов первого уровня: в поле «Ссылка» укажите якорь вида #submenu:catalog, #submenu:services и т.д.
3. Для пунктов второго уровня используйте название пункта меню (например, “Story”).
Добавьте на страницу (лучше в хедер) HTML‑блок T123 и вставьте в него код ниже.
4. В начале кода настройте соответствия:
— для первого уровня: указываете якорь → реальный URL
— для второго уровня: указываете название пункта → реальный URL
Если нужно добавить больше пунктов — просто добавьте новые строки в список, разделяя их запятыми. Каждая строка — это пара «название пункта» : «ссылка».

Дополнительно:

На десктопе (ПК): клик по пункту сразу переводит на нужную страницу.

На мобильных устройствах: первый клик открывает подменю, а второй клик по этому же пункту осуществляет переход по ссылке.

<!-- Скрипт, который делает кликабельные пункты меню первого и второго уровня, у которых есть выпадающие подпункты на Tilda с сайта bulgkate.ru -->

<script>
  $(document).ready(function() {

    // 1 уровень — меняете якорь и URL
    var linkSubt978 = {
      "#submenu:details": "/example"
    };

    // 2 уровень — меняете название пункта и URL
    var linkSubt978Level2ByText = {
      "Story": "/story"
    };

    var openedItemState = {
      level1: null,
      level2: null
    };

    function isDesktop() {
      return window.matchMedia('(min-width: 980px)').matches;
    }

    function getCleanText($link) {
      return $.trim($link.find('.t978__link-inner').first().text());
    }

    function applyMenuLinks() {
      $('.t978__tm-link').each(function() {
        var $link = $(this);
        var href = $link.attr('href');
        var fin = linkSubt978[href];

        if (fin) {
          $link.attr('data-link-href', fin);
        }
      });

      $('.t978__menu-link[data-menu-submenu-hook]').each(function() {
        var $link = $(this);
        var text = getCleanText($link);
        var fin = linkSubt978Level2ByText[text];

        if (fin) {
          $link.attr('data-link-href', fin);
        }
      });
    }

    function resetState() {
      openedItemState.level1 = null;
      openedItemState.level2 = null;
    }

    setTimeout(applyMenuLinks, 800);

    $(window).on('resize', function() {
      setTimeout(applyMenuLinks, 300);
      resetState();
    });

    // 1 уровень
    $(document).off('click.menuCustomLevel1', '.t978__tm-link');
    $(document).on('click.menuCustomLevel1', '.t978__tm-link', function(e) {
      var $link = $(this);
      var finUrl = $link.attr('data-link-href');
      var key = $link.attr('href');

      if (!finUrl || !key) return;

      if (isDesktop()) {
        e.preventDefault();
        document.location = finUrl;
        return;
      }

      if (openedItemState.level1 !== key) {
        resetState();
        openedItemState.level1 = key;
        return;
      }

      e.preventDefault();
      document.location = finUrl;
    });

    // 2 уровень
    $(document).off('click.menuCustomLevel2', '.t978__menu-link[data-menu-submenu-hook]');
    $(document).on('click.menuCustomLevel2', '.t978__menu-link[data-menu-submenu-hook]', function(e) {
      var $link = $(this);
      var finUrl = $link.attr('data-link-href');
      var key = getCleanText($link);

      if (!finUrl || !key) return;

      if (isDesktop()) {
        e.preventDefault();
        document.location = finUrl;
        return;
      }

      if (openedItemState.level2 !== key) {
        resetState();
        openedItemState.level2 = key;
        return;
      }

      e.preventDefault();
      document.location = finUrl;
    });

  });
</script>