<!-- 
We're using the "rel" (relative) attribute to relate this element to a JavaScript actions vs. using a .class or #id so that you know it's for JS specifically 

PE personal preference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
-->

<button rel='toggle'>Toggle menu</button>

<nav class='menu'>
	<a href='#'>Thing one</a>
	<a href='#'>Thing two</a>
	<a href='#'>Thing three</a>

	<button rel='toggle'>Close menu</button>
</nav>

.menu {
	display: none;
	/* not a best practice - but fine for this example - (at this time) */
}


/* We're changing the class on a larger parent scope vs. just the menu... because we may need to style many things on the page differently in this state (menu "open" state) */

body.menu-open {
	/* */
}

body.menu-open .menu { /* how the menu should behave _visually_ (when open) */
	display: block; /* show it! (not "none") */
	/* */
	position: fixed; /* cover the whole screen */
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	/* */
	display: flex; /* positioning its items */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* */
	background-color: var(--pe-cyan);
}







































































body {
	padding: 20px;
}

.menu a {
	display: block;
	text-transform: uppercase;
	text-decoration: none;
	font-family: sans-serif;
	padding: 10px;
}

.menu button {
	margin-top: 20px;
}

var body = document.querySelector('body');

// add a listener to the whole body!
body.addEventListener('click', function(event) {

	// if the click happens on the toggle button...
	if ( event.target.matches('[rel="toggle"]') ) {
		body.classList.toggle('menu-open');
	}

});





/* 
this style of setting the even in a larger scope 
and then based on what is clicked -
	is called "event delegation"
*/

External CSS

  1. https://codepen.io/perpetual-education/pen/eYWBKpL.css

External JavaScript

This Pen doesn't use any external JavaScript resources.