Главная страница — Меню второго уровня в Zero block на Тильде по наведению

Меню второго уровня в Zero block на Тильде по наведению

Как сделать выпадающее меню по ховеру на пункт кодом на Тильде используя Зеро блок
Данный код нужно указать в блок (Другое ⟶ T123 ⟶ HTML-код)
<!-- Меню из Зеро блолка открывающееся по наведению (on hover) на пункт в меню -->
<!-- https://roman-kosov.ru/zero-block-menu-onhover -->

<script>
$("document").ready(function() {
/* #rec207720047 — id Зеро блока (меню 1-го уровня, основной) */
    var mainMenuBlock = "#rec207720047";
    var hoverLeave = $(mainMenuBlock).find(".t396__elem").not($("[href='#menuhover']").parent());

/* #rec130781742 — id Зеро блока (меню 2-го уровня, который будет всплывать) */
    var secondaryMenuBlock = "#rec207720048";
    var menuArtboardHover = $(secondaryMenuBlock).find(".t396__artboard");

    $("[href='#menuhover']").hover(function(e) {
        e.preventDefault();
        if(!menuArtboardHover.hasClass("open")) {
            menuArtboardHover.addClass("open");
        }
    });
    
    menuArtboardHover.mouseleave(function(e) {
        e.preventDefault();
        menuArtboardHover.removeClass("open");
    });

    $(hoverLeave).mouseenter(function(e) {
        e.preventDefault();
        menuArtboardHover.removeClass("open");
    });

    $(window).scroll(function(e) {
        menuArtboardHover.removeClass("open");
    });
});
</script>

<style>
/* #rec207720047 — id Зеро блока (меню 1-го уровня, основной) */
#rec207720047 {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 998;
}

/* #rec207720048 — id Zero блока (меню 2-го уровня, который будет всплывать) */
#rec207720048 .t396__artboard {
    z-index: 997;
    position: fixed;
    margin: auto;
    top: 130px; /* высота Zero блока (меню 1-го уровня, основной) */
    left: 0;
    transition: all .4s ease;
    pointer-events: none;
    transform: translateY(-600px); /* сумма высот Zero блоков, которые играют роль меню (1-го и 2-го уровня) */
    justify-content: space-around;
    box-shadow: 0 9px 9px 0 rgba(0, 0, 0, .09);
}

.open {
    pointer-events: all !important;
    transform: translateY(0px) !important;
}
</style>
В основном меню укажите ссылку: #menuhover
По наведению на пункт с якорем #menuhover будет показываться меню второго уровня
Посмотреть ID блока можно прокрутив в самый низ в «Настройках» блока.
(NEW) Вы можете скачать и установить расширение, которое поможет найти id блока ещё быстрее.