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

Есть в интернете несколько инструкций, как сделать меню второго уровня из 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');
    }
    
    menuBtn.click(e => menuSubOpen(e));
    menuSubWrapper.mouseleave(e => menuSubClose(e));
    menuSubArtboard.mouseleave(e => menuSubClose(e));
    $(window).scroll(e => menuSubClose(e));
});
</script>

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

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

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

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