Simple Hamburger Menu navigation using javascript only, Menu icon active/inactive identification is very simple now. Just using this snippet. Finally i get easy code.
I’m trying to make a custom javascript toggle function differentiate with active and inactive. Now, How can I shuffle these functions to make them toggle
In Html5 we have one new element known as <nav>
tag. It is used to define a block of navigation links.
The classes are define with in the <div>
tag. In that tag we defined a class called nav-toggle.
nav-toggle
class defined another class called nav-toggle-bar
. This class used to display toggle icon on the screen. We are also using java script because it is used to click event function.
HTML
<div class="nav-toggle"> <div class="nav-toggle-bar"></div> </div> <nav class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
CSS
<style> .nav-toggle { -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; height: 2rem; left: 2rem; position: fixed; top: 2rem; width:2rem; z-index: 2; } .nav-toggle:hover { opacity: 0.8; } .nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:#000; content: ''; height:2px; width: 100%; } .nav-toggle .nav-toggle-bar { margin-top: 0; } .nav-toggle .nav-toggle-bar::after { margin-top: 0.8rem; } .nav-toggle .nav-toggle-bar::before { margin-top: -0.8rem; } .nav-toggle.expanded .nav-toggle-bar { background: transparent; } .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before { background: white; margin-top: 0; } .nav-toggle.expanded .nav-toggle-bar::after { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .nav-toggle.expanded .nav-toggle-bar::before { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* nav */ .nav { -webkit-transition: left 0.5s ease; -moz-transition: left 0.5s ease; -ms-transition: left 0.5s ease; -o-transition: left 0.5s ease; transition: left 0.5s ease; background: #000; color: white; cursor: pointer; font-size: 2rem; height: 100vh; left: -25rem; padding: 6rem 2rem 2rem 2rem; position: fixed; top: 0; width: 20rem; z-index: 1; } .nav.expanded { left: 0; } .nav ul { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); list-style: none; margin: 0; padding: 0; } .nav.expanded li a{color:#fff;text-decoration:none;font-size:32px;} .nav.expanded li{margin-bottom:20px;} </style>
Java script
<script> (function() { var hamburger = { navToggle: document.querySelector('.nav-toggle'), nav: document.querySelector('nav'), doToggle: function(e) { e.preventDefault(); this.navToggle.classList.toggle('expanded'); this.nav.classList.toggle('expanded'); } }; hamburger.navToggle.addEventListener('click', function(e) { hamburger.doToggle(e); }); }()); </script>


Finally out put will when we click on the toggle icon that will open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the side nav is opened.
How does it works,
Its very simple use this
Step1
copy and paste style properties in your style file
<style> .nav-toggle { -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; height: 2rem; left: 2rem; position: fixed; top: 2rem; width:2rem; z-index: 2; } .nav-toggle:hover { opacity: 0.8; } .nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:#000; content: ''; height:2px; width: 100%; } .nav-toggle .nav-toggle-bar { margin-top: 0; } .nav-toggle .nav-toggle-bar::after { margin-top: 0.8rem; } .nav-toggle .nav-toggle-bar::before { margin-top: -0.8rem; } .nav-toggle.expanded .nav-toggle-bar { background: transparent; } .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before { background: white; margin-top: 0; } .nav-toggle.expanded .nav-toggle-bar::after { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .nav-toggle.expanded .nav-toggle-bar::before { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* nav */ .nav { -webkit-transition: left 0.5s ease; -moz-transition: left 0.5s ease; -ms-transition: left 0.5s ease; -o-transition: left 0.5s ease; transition: left 0.5s ease; background: #000; color: white; cursor: pointer; font-size: 2rem; height: 100vh; left: -25rem; padding: 6rem 2rem 2rem 2rem; position: fixed; top: 0; width: 20rem; z-index: 1; } .nav.expanded { left: 0; } .nav ul { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); list-style: none; margin: 0; padding: 0; } .nav.expanded li a{color:#fff;text-decoration:none;font-size:32px;} .nav.expanded li{margin-bottom:20px;} </style>
Step2
Follow the below div structure where you want in header
<div class="nav-toggle"> <div class="nav-toggle-bar"></div> </div> <nav class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>