Roden
Posted on May 23, 2021
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 🍔
Posted on May 23, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
