Bootstrap Hamburger Menu

Posted on by Techdezine

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>
Hamburger menu icon
after Active Hamburger menu

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>
Demo