Loading...

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

С помощью нашей модификации ты можешь настроить определение страницы и выделять соответствующий пункт меню в ЗЕРО БЛОК
Время настройки: 3 минуты
Генератор кода
Видео инструкция
Пример
2 БЛОК
3 БЛОК
Инструкция
1. Делаем меню в зеро блоке;

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

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

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

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

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

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

ВАЖНО: Если указали в пунктах меню и ссылку и id блока или якорную ссылку, то будет выделяться несколько пунктов одновременно. Советуем так не делать)
id зеро меню
Класс элемента
Активный пункт меню:
Цвет текста
Насыщенность (font-weight)
Непрозрачность
Подчеркнуть пункт меню
Цвет подчеркивания
При наведении:
Цвет текста
Непрозрачность
Подчеркнуть пункт меню
Цвет подчеркивания
Копировать код<!-- Как сделать активный пункт меню в 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>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda