Burger Popup Menu (anime.js) 🍔
source link: https://dev.to/kerthin/burger-popup-menu-anime-js-38lo
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Burger Popup Menu (anime.js) 🍔
May 23
・2 min read
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 🍔
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK