Animated menu

by AltayH

HTML

<nav>
<div id="menu" class="navlink">Menu</div>
<div class="navbar">
<a class="navlink" href="">First item</a>
<a class="navlink" href="">Second item</a>
<a class="navlink" href="">Third item</a>
<a class="navlink" href="">Fourth item</a>
</div>
</nav>

<p>
Text content.
</p>

CSS

.navbar {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-height: 152px;
	transition: max-height 0.3s ease;
}
.navlink {
	padding: 10px;
	width: 80px;
	background: lightblue;
}
#menu {
	color: white;
	background: steelblue;
}
.hidden {
	max-height: 0;
}

JavaScript

function menuListener() {
	const navbar = document.querySelector('.navbar');
	navbar.classList.toggle('hidden');
}

const menu = document.getElementById('menu');
menu.addEventListener('click', menuListener);