Author: | Bryanauta |
---|---|
Views Total: | 1,410 views |
Official Page: | Go to website |
Last Update: | July 21, 2021 |
License: | MIT |
Preview:

Description:
A modern animated toggle menu built with JavaScript and CSS3 transitions & transforms.
How to use it:
1. Create a nav list with a toggle button on the page.
<nav class="active" id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Works</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <button class="icon" id="toggle"> <div class="line line1"></div> <div class="line line2"></div> </button> </nav>
2. The main CSS for the toggle menu.
nav { background-color: white; padding: 20px; width: 80px; display: flex; align-items: center; justify-content: center; border-radius: 3px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: width 0.6s linear; } nav.active { width: 350px; } nav ul { display: flex; list-style: none; padding: 0; margin: 0; width: 0; transition: width 0.6s linear; } nav.active ul { width: 100%; } nav ul li { transform: rotateY(0deg); opacity: 0; transition: transform 0.6s linear, opacity 0.6s linear; } nav.active ul li { opacity: 1; transform: rotateY(360deg); } nav ul a { position: relative; color: black; text-decoration: none; margin: 0 10px; }
3. Style the toggle button.
.icon { background-color: white; border: none; cursor: pointer; position: relative; height: 30px; width: 30px; } .icon:focus { outline: none; } .icon .line { background-color: #5290f9; height: 2px; width: 20px; position: absolute; top: 10px; left: 5px; transition: transform 0.6s linear; } .icon .line2 { top: auto; bottom: 10px; } nav.active .icon .line1 { transform: rotate(-765deg) translateY(5.5px); } nav.active .icon .line2 { transform: rotate(765deg) translateY(-5.5px); }
4. Enable the toggle button to expand & collapse the menu.
const toggle = document.getElementById('toggle'); const nav = document.getElementById('nav'); toggle.addEventListener('click', () => { nav.classList.toggle('active') });