Author: | Amadou Oury Diallo |
---|---|
Views Total: | 2,037 views |
Official Page: | Go to website |
Last Update: | May 2, 2019 |
License: | MIT |
Preview:

Description:
An awesome navigation system that expands the hamburger toggle button into a horizontal navigation bar using CSS3 transitions and transforms.
How to use it:
Create the HTML for the hamburger navigation.
<div class="nav-wrapper"> <nav> <div class="navigation"> <ul class="nav-items"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">About</a></li> </ul> <div class="nav-toogler"></div> </div> </nav> </div>
The necessary CSS/CSS3. Copy and paste the following CSS snippets into the document.
.nav-wrapper{ position: relative; width: 100%; height: 100%; font-family: "Trebuchet MS" , Arial; } .nav-wrapper::before, .nav-wrapper::after{ content: ''; position: relative; display: block; width: 100%; height: 50%; background-color: #EAFBFF; } .nav-wrapper::after{ background-color: #208FF9; } .nav-wrapper nav{ position: absolute; top: 0; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .navigation{ max-width: 500px; border-radius: 8px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); background-color: #fff; padding-right: 30px; line-height: 3; display: flex; justify-content: space-between; align-items: center; } .nav-wrapper ul{ display: flex; justify-content: space-between; list-style: none; width: 0; overflow: hidden; transition: .4s cubic-bezier(.77,0,.18,1); } .nav-wrapper.active ul{ width: 420px; margin-right: 20px; } a{ color: #888; text-decoration: none; transition: .3s; } a:hover{ color: #3C9DFB; } .nav-toogler{ position: relative; display: inline-block; width: 40px; height: 48px; padding: 14px 5px; cursor: pointer; } .nav-wrapper:not(.active) .nav-toogler{ margin-left: -10px; } .nav-toogler::before, .nav-toogler::after{ content: ''; position: relative; display: block; width: 30px; height: 3px; background-color: #3C9DFB; transition: .4s cubic-bezier(.77,0,.18,1); } .nav-toogler::after { margin-top: 10px; } .nav-wrapper.active .nav-toogler::before, .nav-wrapper.active .nav-toogler::after{ position: absolute; top: 50%; background-color: #3C9DFB; transform: rotate(135deg); } .nav-wrapper.active .nav-toogler::after { transform: rotate(-135deg); margin-top: 0; }
The necessary JavaScript to toggle CSS classes on click.
let navWrapper = document.querySelector('.nav-wrapper'), navToogler = document.querySelector('.nav-toogler') navToogler.addEventListener('click', function (event) { navWrapper.classList.toggle('active') })