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>