Кастомное меню круглое

Для Ани Мельник

Circle open

Slide left

О нас

Связаться

Работы

Инструкция

(скрыть)

1. Сделайте меню в Zero Block: задайте ему 100% высоты, настройте sbs анимации. Всем элементам с анимацией задайте класс menu--elem.
! Именно пошаговой, а не базовой анимации.

2. Добавьте в Zero Block с меню объект для закрытия меню (кнопка/шейп/изображение/текст) и задайте ему класс menu__close.

3. Объекту, который будет открывать меню (кнопка/шейп/изображение/текст) задайте класс menu__open.

4. Напишите в форму ID блока с меню.

5. В форме при необходимости замените длительность анимации открытия, функцию скорости и время задержки запуска sbs анимации объектов меню. Последнее действие нужно, чтобы анимация начала проигрываться не одновременно с нажатием кнопки открытия меню (в моем примере меню открывается за 0.8 секунд, задержка анимации 0.6 секунд).
!Не пишите в поле формы 1s, только число. Либо пользуйтесь стрелками в поле.
Функции скорости можно посмотреть на этом сайте.

6. Скопируйте код и вставьте в блок T123.

7. После проверки работоспособности сожмите код на этом сайте.

8. Для плавного скролла к якорю добавьте в самый низ страницы блок T178.

Если не работает

1. Проверьте, правильно ли указаны классы элементам, правильный ли ID вставлен в форму.

2. Откройте консоль Ctrl + Shift + I → Console (на продукции Apple попробуйте Command + Option + I) и посмотрите ошибки. Иногда, код отображается в редакторе с ошибками, в таком случае ее можно будет там увидеть. Если не хватает каких-то скобок, то их нужно проставить.

<style>
    #rec425133669 {position: fixed; top: 0; left: 0; width: 100%; z-index: 100000; opacity: 0; visibility: hidden; clip-path: circle(25px at calc(100% - -10px) -25px); transition: all 0.8s ease;}
    #rec425133669 .tn-atom__sbs-anim-wrapper {animation-delay: 0.6s!important;}
    .menu__close, .menu__open {cursor: pointer;}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const menu = document.querySelector('#rec425133669');
    const burger = document.querySelector('.menu__open');
    const close = document.querySelector('.menu__close');
    const sbs = document.querySelectorAll('.menu--elem');
    const link = document.querySelectorAll('.menu--elem a');
    const menuDurDesc = 0; 
    
    const del = setInterval(function() {
        sbs.forEach(el => {
            el.classList.remove('t-sbs-anim_started');
        });
    }, 50);
    const s = setTimeout(() => {
        clearInterval(del);
    }, 300);
    
    function run () {
        sbs.forEach(el => {
            el.classList.add('t-sbs-anim_started');
        });
    }
    
    function stop () {
        sbs.forEach(el => {
            setTimeout(() => {
                el.classList.remove('t-sbs-anim_started');
            }, 500);
        });
    }
    
    function openMenu () {
        document.body.style.overflow = "hidden";
        menu.style.visibility = "visible";
        menu.style.opacity = '1';
        menu.style.clipPath = "circle(75%)";
        run();
    }
    
    function closeMenu () {
        menu.style.clipPath = "circle(25px at calc(100% - -10px) -25px)";
        setTimeout(() => {
            menu.style.opacity = "0";
            menu.style.visibility = "hidden";
        }, 500);
        document.body.style.overflow = "";
    };
    
    
    burger.addEventListener('click', (e) => {
        openMenu();
        run();
    });
    
    close.addEventListener('click', (e) => {
        stop();
        closeMenu();
    });
    
    sbs.forEach(el => {
        el.addEventListener('click', (e) => {
            e.preventDefault;
            window.history.pushState({}, null, window.location.pathname); 
            closeMenu();
            stop();
        });
    });
});
</script>