Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 23, 2021 04:08 pm GMT

Burger Popup Menu (anime.js)

Alt Text

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


Original Link: https://dev.to/kerthin/burger-popup-menu-anime-js-38lo

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To