Author: | ftwnav |
---|---|
Views Total: | 1,215 views |
Official Page: | Go to website |
Last Update: | April 15, 2021 |
License: | MIT |
Preview:

Description:
A responsive site nav that automatically collapses into a side hamburger menu (off-canvas menu) in mobile view.
Built with CSS flexbox and a little bit of JavaScript.
How to use it:
1. Add your site logo, menu items, and hamburger toggle button to the nav.
<nav> <div class="logo"> <h2>Site Logo</h2> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> <div class="menu-bars"> <input type="checkbox"> <span></span> <span></span> <span></span> </div> </nav>
2. The necessary CSS/CSS3 styles for the site nav.
/* Core */ nav{ display:flex; background-color: rgb(126, 43, 204); justify-content: space-around; padding:20px 0; color:rgb(255, 254, 254); align-items: center; } nav.logo{ letter-spacing: 3px; } nav ul{ display:flex; list-style: none; width:40%; justify-content: space-between; } nav ul li a { color:rgb(255, 254, 254); text-decoration: none; font-size: 1em; } nav ul.slide{ transform: translateX(0); } /* Hamburger */ .menu-bars{ display:none; flex-direction: column; height:20px; justify-content: space-between; position:relative; } .menu-bars input{ position: absolute; width:40px; height:28px; left:-5px; top:-3px; opacity: 0; cursor:pointer; z-index: 2; } .menu-bars span{ display:block; width:28px; height:3px; background-color:rgb(255, 254, 254); border-radius: 3px; transition: all 0.3s; } .menu-bars span:nth-child(2){ transform-origin: 0 0 ; } .menu-bars span:nth-child(4){ transform-origin: 0 100% ; } .menu-bars input:checked ~ span:nth-child(2){ background-color: white; transform: rotate(45deg) translate(-1px, -1px); } .menu-bars input:checked ~ span:nth-child(4){ background-color: white; transform: rotate(-45deg) translate(-1px,0); } .menu-bars input:checked ~ span:nth-child(3){ opacity: 0; transform: scale(0); } /* Mobile Menu */ @media only screen and (max-width: 768px){ nav ul{ width:50%; } } @media only screen and (max-width: 576px){ .menu-bars{ display:flex; } nav ul{ position:absolute; right:0; top:0; width:80%; height:100vh; justify-content: space-evenly; flex-direction: column; align-items: center; background-color: rgb(126, 43, 204); z-index: -1; transform: translateX(100%); transition: all 1s; } }
3. Enable the hamburger button to toggle the mobile menu.
const menuToggle= document.querySelector(".menu-bars"); const nav = document.querySelector("nav ul"); menuToggle.addEventListener("click", () => { nav.classList.toggle("slide"); });