<button type="button" id="toggle-menu" aria-expanded="false" aria-label="Menu">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" fill=#000000;>
<path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z">
</path>
</svg>
</button>
<nav class="nav-menu">
<ul>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
body {
font-family: monospace;
font-size: 1.5rem;
}
a {
color: white;
text-decoration: none;
}
li {
list-style: none;
margin-top: 2rem;
}
ul {
padding-left: 0px;
}
button {
border: none;
padding: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
background-color: rgb(211, 211, 211);
}
button:active {
/* So we know when the button is being clicked */
background-color: rgb(182, 182, 182);
}
nav {
position: absolute;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: lightseagreen;
}
.nav-menu {
/* Initial state */
opacity: 0;
visibility: hidden;
transform: scale(0.95); /* 95% */
transform-origin: top left;
transition: all 300ms ease-in-out;
}
.nav-menu.expanded {
/* Expanded state */
opacity: 1;
visibility: visible;
transform: scale(1); /* 100% */
}
const toggleMenuBtn = document.querySelector("#toggle-menu");
const navMenu = document.querySelector("nav");
toggleMenuBtn.addEventListener("click", function() {
navMenu.classList.toggle("expanded");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.