Burger Popup Menu (anime.js) 🍔
Tags: codepen, webdev, css, html
Published: 2021-05-23 16:08:52

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/key0n9vpwwrrrg3c79b6.gif)

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`.

<strong>Here it is:</strong>
```javascript
/*____________________________________________________________
# 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`.

<strong>Demo:</strong>
{% codepen https://codepen.io/Astap/pen/QWpKwmb %}

<strong>P.S.</strong>
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.

<strong>Burger structure (Pug):</strong>
```javascript
//-- 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`.

<strong>SCSS with `:checked pseudo-class`:</strong>
```javascript
.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 🍔