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

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

Как сделать выпадающее меню (второго уровня) на Тильде в Зеро блоке по клику на пункт
Меню открывается по клику. Необходимо разместить блок T123 из раздела «Другое» и добавить код:
<!-- Меню открывается по клику -->

<script>
$("document").ready(function() {
    /* #rec130781742 — id Зеро блока (меню 2-го уровня, который будет всплывать) */
    var menuBlockID = "#rec130781742";
    var isAlready = false;
    var menuArtboard = $(menuBlockID).find(".t396__artboard");
    $("[href='#menu']").click(function(e) {
        e.preventDefault();
        $(menuArtboard).toggleClass("open");
        if(!isAlready) {
            $(menuArtboard).mouseleave(function(e) {
                e.preventDefault();
                $(menuArtboard).toggleClass("open");
                isAlready = true;
            });
        }
    });
});
</script>

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

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

.open {
    pointer-events: all !important;
    transform: translateY(0px) !important;
}
</style>
В основном меню укажите ссылку: #menu
По нажатию на пункт с ссылкой #menu будет открывать меню второго уровня.
Посмотреть ID блока можно прокрутив в самый низ в «Настройках» блока.
(new) Вы можете скачать и установить расширение, которое поможет найти id блока ещё быстрее.
Обратная связь со мной ✨
Куда отвечать
Сообщение
Не откажусь от вашей подде₽жки → https://roman.ws/donate ❤️
Мой код для меню второго уровня используется в проекте https://theplantmoscow.ru
Этот список будет пополняться красивыми вариантами. Если у вас оригинальное использование кода, то пришлите ссылку на свой проект → zero-menu@roman.ws, я обязательно его размещу на странице
А для тех, кто долистал страницу до низа, бонус:
<style>
/* Подчёркивание ссылки в виде волны */
/* Чтобы поменять цвет замените stroke='#00ab83', где #00ab83 — нужный вам цвет */
a:not(.t-btn):hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle%3E/*%D0%9A%D0%BE%D1%81%D0%BE%D0%B2*/@keyframes shift{0%{transform:translateX(0)}to{transform:translateX(-20px)}}%3C/style%3E%3Cpath fill='none' stroke='#00ab83' stroke-width='2' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3' style='animation:shift .3s linear infinite'/%3E%3C/svg%3E");
    background-position: 0 100% !important;
    background-size: auto 6px;
    background-repeat: repeat-x;
    text-decoration: none;
}
</style>