3 Блок

Как сделать активный пункт меню в ZERO BLOCK?

С помощью нашей модификации ты можешь настроить определение страницы и выделять соответствующий пункт меню в ЗЕРО БЛОК

Время настройки: 3 минуты

Генератор кода

Видео инструкция

Пример

2 БЛОК

3 БЛОК

Инструкция

1. Делаем меню в зеро блоке;

2. Добавляем свои пункты меню (Можно кнопки, можно текст) и указываем класс к ним такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс что и в генераторе;

3. Вписываем id нашего меню в генератор;

4. В генераторе прописываем настройки для активного пункта и при наведении;

5. В зеро блоке, где у нас меню, каждому пункту задаем якорную ссылку либо id блока или ссылку на другую страницу;

6. Добавь блок Т123 и вставь в него сгенерированный HTML код;

ВАЖНО: Если указали в пунктах меню и ссылку и id блока или якорную ссылку, то будет выделяться несколько пунктов одновременно. Советуем так не делать)

Копировать код<!-- Как сделать активный пункт меню в ZERO BLOCK? -->
    <!-- https://nolim.cc/aktivnyy-punkt-menyu -->
    <script src="https://static.tildacdn.com/js/tilda-menusub-1.0.min.js" charset="utf-8" async=""></script> <script> function t_menusub_highlight2() { var url = window.location.href , pathname = window.location.pathname; "/" == url.substr(url.length - 1) && (url = url.slice(0, -1)), "/" == pathname.substr(pathname.length - 1) && (pathname = pathname.slice(0, -1)), "/" == pathname.charAt(0) && (pathname = pathname.slice(1)), "" == pathname && (pathname = "/"),  cutommenu = '.nlcustommenu', $(cutommenu+' a[href="' + url + '"]').addClass("t-active"), $(cutommenu+' a[href="' + url + '/"]').addClass("t-active"), $(cutommenu+' a[href="' + pathname + '"]').addClass("t-active"), $(cutommenu+' a[href="/' + pathname + '"]').addClass("t-active"), $(cutommenu+' a[href="' + pathname + '/"]').addClass("t-active"), $(cutommenu+' a[href="/' + pathname + '/"]').addClass("t-active") } function t_menusub_checkAnchorLinks2(recid) { var navLinks = $("#rec" + recid).find('.nlcustommenu a:not(.tooltipstered)[href*="#"]'); navLinks.length > 0 && t_menusub_catchScroll(navLinks)   } $(document).ready(function(){ t_menusub_highlight2(); setTimeout(function(){ t_menusub_highlight2(); t_menusub_checkAnchorLinks2("306664845"); },600); }); </script> <style> .nlcustommenu .tn-atom { -webkit-transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out; } .nlcustommenu .tn-atom:after { content: ''; position: absolute; left: 0; bottom: 20%; opacity: 0; width: 100%; height: 100%; border-bottom: 2px solid #ab3c3c; -webkit-box-shadow: inset 0px -1px 0px 0px #ab3c3c; -moz-box-shadow: inset 0px -1px 0px 0px #ab3c3c; box-shadow: inset 0px -1px 0px 0px #ab3c3c; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .nlcustommenu .tn-atom.t-active{ color: #4a3939 !important; font-weight: 700 !important; opacity: 100% !important; } .nlcustommenu .tn-atom.t-active:after { opacity: 1; bottom: -1px; border-bottom: 2px solid #ab3c3c; -webkit-box-shadow: inset 0px -1px 0px 0px #ab3c3c; -moz-box-shadow: inset 0px -1px 0px 0px #ab3c3c; box-shadow: inset 0px -1px 0px 0px #ab3c3c; } .nlcustommenu .tn-atom:not(.t-active):not(.tooltipstered):hover { color: #4a3939 !important; opacity: 100%; } .nlcustommenu .tn-atom:not(.t-active):not(.tooltipstered):hover::after { opacity: 1; bottom: -1px; } </style>