Author: | Minh Nguyen |
---|---|
Views Total: | 627 views |
Official Page: | Go to website |
Last Update: | August 30, 2021 |
License: | MIT |
Preview:

Description:
A hamburger navigation system that reveals a fullscreen overlay menu with a background image when toggled.
How to use it:
1. Code the HTML for the hamburger toggler.
<div class="menu-button"> <span></span> <span></span> <span></span> </div>
2. Code the HTML for the overlay menu.
<div class="menu-overlay"> <div class="nav"> <nav class="nav__items"> <p class="nav__category">JavaScript</p> <a class="nav__item" href="#">jQuery</a> <a class="nav__item" href="#">Angular</a> <a class="nav__item" href="#">React</a> </nav> <nav class="nav__items"> <p class="nav__category">CSS</p> <a class="nav__item" href="#">CSS3</a> <a class="nav__item" href="#">SASS</a> <a class="nav__item" href="#">LESS</a> </nav> </div> <div class="menu-overlay__image"> <img src="/path/to/image.jpg" alt="Overlay Menu Image" /> </div> </div>
3. Code the CSS.
/* hamburger button */ .menu-button { width: 1.5rem; position: fixed; top: 2rem; right: 2rem; cursor: pointer; height: calc(0.25rem * 5); z-index: 666; } .menu-button span { width: 1.5rem; height: 0.25rem; background-color: black; display: block; position: absolute; transition: all 0.6s ease; } .menu-button span:nth-of-type(2) { top: calc(0.25rem * 2); } .menu-button span:nth-of-type(3) { top: calc(0.25rem * 4); } .menu-button.active span { background-color: white; } .menu-button.active span:nth-of-type(1) { transform: translateY(0.5rem) rotate(-45deg); } .menu-button.active span:nth-of-type(2) { transform: translateX(1.5rem); opacity: 0; } .menu-button.active span:nth-of-type(3) { transform: translateY(-0.5rem) rotate(45deg); } /* overlay menu */ .menu-overlay { width: 100%; height: 100%; position: fixed; top: 0; background-color: black; display: grid; grid-template-columns: 3fr 4fr; color: white; transform: translateX(100%); transition: all 0.6s ease-in-out; } .menu-overlay.open { transform: translateX(0); } .menu-overlay.open .menu-overlay__image img { animation: fadeIn 0.8s ease-in-out 0.6s forwards; } .menu-overlay.open .nav { animation: fadeIn 0.8s ease-in-out 0.2s forwards; } .menu-overlay__image img { width: 100%; height: 100%; object-fit: cover; opacity: 0; } .nav { padding: 2rem; opacity: 0; } .nav__items { display: flex; flex-direction: column; } .nav__items:not(:first-child) { margin-top: 4rem; } .nav__category { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.125em; opacity: 0.5; } .nav__item { color: white; margin-top: 1rem; text-decoration: none; position: relative; transition: all 0.2s ease-in-out; } .nav__item::before { content: ""; height: 1px; width: 0; background-color: white; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 0.2s ease-in-out; } .nav__item:hover { padding-left: calc(2rem + 1rem); } .nav__item:hover::before { width: 2rem; } // animation @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
4. Enable the hamburger toggled to open the overlay menu.
const menuButton = document.querySelector(".menu-button"); const menuOverlay = document.querySelector(".menu-overlay"); menuButton.addEventListener("click", function () { menuButton.classList.toggle("active"); menuOverlay.classList.toggle("open"); });