Меню второго уровня из Zero-блока по клику или наведению

Для работы данной модификации требуется jQuery. Как правильно его подключить читайте тут.

Есть в интернете несколько инструкций, как сделать меню второго уровня из Zero-блока. Однако во всех подобных инструкциях нужно прописывать ID. А если у вас таких меню несколько? Под каждое нужно писать кучу кода. Бр-р-р.

Предлагаем обойтись универсальным решением, с помощью которого вы сделаете меню из зеро-блока по клику или по наведению, не запутаетесь в ID этих блоков, не будете дублировать кучу одинакового кода, и вообще обойдётесь без болей в попе.

Инструкция:

Создайте кнопки в Zero-блоке, которое будет являться вашим меню, для вызова меню второго уровня.
Расположите кнопки по слоям, где на нижнем слое будет первая кнопка, на верхнем слое последняя.
Задайте всем кнопкам класс, например, menu-btn.
Задайте каждой кнопке собственную ссылку с одинаковым началом, например, #menu1, #menu2, #menu3 и т. д.
Укажите высоту основного меню (в пикселях).
Пропишите класс для основного меню (Zero-блока с кнопками), например, uc-menu.
Создайте и задизайните столько Zero-блоков, сколько меню второго уровня вам нужно.
Расставьте их в порядке, в котором у вас стоят сами кнопки. Т. е., если кнопка #menu1, вызывающая меню второго уровня № 1 самая первая, то и блок с вызываемым меню второго уровня № 1 должен находиться выше остальных.
Для каждого блока с меню второго уровня задайте класс, например, uc-menu-sub, отличающийся от остальных классов блоков на сайте.
Введите все параметры в форму ниже и настройте цвета для активной кнопки
Скопируйте получившийся код и вставьте его в блок Т123 под все участвующие в модификации блоки.

Показывать меню

При наведении

По клику

Меню при скролле

Статично

Фиксируетуется

<!-- Меню второго уровня из Zero-блока по клику или наведению | https://necodim.ru/tilda/menu-sub -->

 <style> .uc-menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
}
.uc-menu-sub .t396__artboard {
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2000px);
    transition: opacity .2s ease-in;
}
.uc-menu-sub .t396__artboard.active {
    pointer-events: all !important;
    transform: translateY(0px) !important;
    opacity: 1;
}
.menu-btn.active .tn-atom {
    color: #222222 !important;
    background-color: #ffcc00 !important;
    border-color: #ffcc00 !important;
}
</style>

 <script>
$(function() {
    let menu = $('.uc-menu'),
        menuBtn = menu.find('.menu-btn'),
        menuBtnLink = '#menu',
        menuSub = $('.uc-menu-sub'),
        menuSubArtboard = menuSub.find('.t396__artboard'),
        menuSubWrapper;
    
    for (let i=0; i<menuSub.length; i++) {
        $(menuSub[i]).find('.t396__elem').wrapAll('<div class="menu-sub">');
    }
    menuSubWrapper = $('.menu-sub');
    
    function menuSubOpen(e) {
        e.preventDefault();
        menuBtn.removeClass('active');
        menuSubArtboard.removeClass('active');
        let n = parseInt($(e.target).attr('href').replace(menuBtnLink, ''), 10) - 1;
        $(menuBtn[n]).addClass('active');
        $(menuSub[n]).find('.t396__artboard').addClass('active');
        t_lazyload_update();
    }
    
    function menuSubClose(e) {
        e.preventDefault();
        menuBtn.removeClass('active');
        menuSubArtboard.removeClass('active');
    }
    
    function menuSubToggle(e) {
        e.preventDefault();
        menuBtn.hasClass('active') ? menuSubClose(e) : menuSubOpen(e);
    }
    
    menuBtn.click(e => menuSubToggle(e));
    menuSubWrapper.mouseleave(e => menuSubClose(e));
    menuSubArtboard.mouseleave(e => menuSubClose(e));
    $(window).scroll(e => menuSubClose(e));
});
</script>

Скопировать код

Пример работы модификации

Можно посмотреть на отдельной странице

Смотреть пример