An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
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
Original Link: https://dev.to/kerthin/burger-popup-menu-anime-js-38lo
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To