Burger Popup Menu (anime.js) 🍔

Burger popup menu with hover navigation.

To implement the menu, I used anime.js and reavelRx.js. Unfortunately, I didn't have the ability to insert library references into the project, so I had to copy their contents to a js file. The menu script itself starts at line 238 and is marked with the comment # Popup menu script.

Here it is:

/*____________________________________________________________
# Popup menu script
____________________________________________________________*/
(function() {

    var popupMenu = document.querySelector('.popupMenu'),
            revealer = new RevealFx(popupMenu),
            burger = document.querySelector('.burgerWrap');

        burger.onclick = function() {
            if (burger.classList.contains('js-burgerWrap_close') === true) {
                revealer.reveal({
                    bgcolor: '#f7e0b5',
                    direction: 'tb',
                    duration: 700,
                    onCover: function(contentEl, revealerEl) {
                        popupMenu.classList.add('js-popupMenu_open');
                        contentEl.style.opacity = 1;
                        burger.classList.remove('js-burgerWrap_close');
                    }
                });
            } else {
                popupMenu.classList.remove('js-popupMenu_open');
                revealer.reveal({
                    bgcolor: '#f7e0b5',
                    direction: 'bt',
                    duration: 700,
                    onCover: function(contentEl, revealerEl) {
                        popupMenu.classList.remove('js-popupMenu_open');
                        contentEl.style.opacity = 0;
                        burger.classList.add('js-burgerWrap_close');
                    }
                });
            }
        }
    popupMenu.addEventListener('submit', function(ev) {ev.preventDefault();});
})();

In it, you can change the color, direction, and speed of the sliding block that opens and closes the menu.
Let's say that when opening it slides from left to right and it has a red color, and when closing it slides from bottom to top and its color is blue.

Demo:

P.S.
I didn't bother creating a burger icon. There is no need to reinvent the wheel. So I decided to take it from another Pen from CodePen. But at the same time, I decided to translate its html code into pug for my own convenience.

Burger structure (Pug):

//-- Burger
    .burgerWrap.js-burgerWrap_close
        label.burgerWrap__box
            input.burgerInput(type="checkbox")
            svg.strokeWrap(viewBox="30 28 40 40" xmlns="http://www.w3.org/2000/svg")
                path.strokeWrap__stroke.strokeWrap__stroke_first(d="M0 40h62c13 0 6 28-4 18L35 35")
                path.strokeWrap__stroke.strokeWrap__stroke_second(d="M0 50h70")
                path.strokeWrap__stroke.strokeWrap__stroke_third(d="M0 60h62c13 0 6-28-4-18L35 65")

It is created using svg and uses the input (checkbox) and the :checked pseudo-class in css to run the animation. Therefore, it does not need js to work. But if you want, you can implement running the burger animation via js.

SCSS with :checked pseudo-class:

.strokeWrap__stroke {
    fill: none;
    stroke: #f7e0b5;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    --length: 24;
    --offset: -38;
    stroke-dasharray: var(--length) var(--total-length);
    stroke-dashoffset: var(--offset);
    transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.strokeWrap__stroke_first,
.strokeWrap__stroke_third {
    --total-length: 126.64183044433594;
}
.strokeWrap__stroke_second {
    --total-length: 70;
}
.burgerInput {
    display: none;

    &:checked {

        + .strokeWrap {

            .strokeWrap__stroke_first,
            .strokeWrap__stroke_third {
                --length: 22.627416998;
                --offset: -94.1149185097;
            }
            .strokeWrap__stroke_second {
                --length: 0;
                --offset: -50;
            }
        }
    }
}

Thank you for your time 🍔

Comments

[Ahsan Ali]

Hello Roden,

Your post on the "Burger Popup Menu" using Anime.js is truly impressive! The smooth animations and clean code make it a fantastic resource for developers. Your attention to detail and ability to create such an engaging design inspire me as a developer.

By the way, your burger theme reminded me of my recent project, jackinboxmenu.us, where we provide details about Jack in the Box's menu. If anyone’s hungry or curious about their delicious offerings, feel free to check it out.

Thank you for sharing your expertise—it’s posts like these that help the community grow