Hamburger Menu using Jquery and CSS

Hamburger menu

Hamburger-Menu

We all are well known of the importance of menu icons on the website. They provide great navigation and user experience of the website to both, users as well as website owners.

In this demo, we will explain how to develop a hamburger-type menu that consists of a fixed button on the navigation bar that, when clicked, displays or hides the side menu containing a list of links.

Hamburger menu button is the button on your website which shows or hides the menu icons on the navigation bar.This menu is also responsive, so that on screens with width 100% it occupies the entire page, as follows.

HTML

<header> 
<div class="navbar-header"> 
<div class="toggle-button" id="toggle"> 
<span class="menubar top"></span> 
<span class="menubar middle"></span> 
<span class="menubar bottom"></span> 
</div> </div> 
<nav class="overlay" id="overlay"> 
<ul> <li><a href="#">Home</a></li> 
<li><a href="#">Blog</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Portfolio</a></li> 
<li><a href="#">Contact</a></li> 
</ul> </nav> 
</header> 
<div class="container"> 
<h1>jQuery Overlay Menu Demo Page</h1> 
</div>

In the header section of our page we refer to our style sheet link.

  <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

In the body section of the document, the main part is inside the and tags, which contain the hamburger button and the menu links list. And we have defined some classes like
.menubar, .toggle-button, .overlay, .nav-active.
respectively, as we can see below

body { font-family:'Roboto Condensed'}
    .container {
	  max-width: 728px;
	  margin: 100px auto;
	  padding: 100px auto;
	}	
	@import url(http://fonts.googleapis.com/css?family=Vollkorn|Roboto);
	.toggle-button {
		position: fixed;
		top: 8px;
		left: 15px;
		padding: 9px 10px;
		margin: 8px 15px 8px 0;
		height: 20px;
		width: 35px;
		cursor: pointer;
		z-index: 3;
	}
	.menubar {
		background-color: #ff5252;
		display: block;
		width: 100%;
		height: 5px;
		border: 0;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
	}
	.menubar + .menubar {
		margin-top: 4px;
	}
	.middle {
		top: 11px;
	}
	.bottom {
		top: 22px;
	}
	.toggle-button:hover {
		opacity: .7;
	}
	.toggle-active .menubar {
		background-color: #fff;
	}
	.toggle-active .top {
		-webkit-transform: translateY(6px) translateX(0) rotate(45deg);
	}
	.toggle-active .middle {
	   opacity: 0;
	}
	.toggle-active .bottom {
		-webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
	}
	.overlay {
		position: fixed;
		background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
	}
	.nav-active {
		opacity: 1;
		visibility: visible;
		height: 100%;
	}
	.overlay ul {
		display: block;
		position: relative;
		top: 60px;
		left: 0;
		font-family: 'Vollkorn', serif;
		font-size: 50px;
		font-weight: 400;
		text-align: center;
		list-style: none;
		padding: 0;
	}
	.overlay ul li {
		display: block;
	}
	.overlay ul li a {
		color: #fff;
		text-decoration: none;
	}

The button that contains the burger icon, that is used to display or hide the menu is defined in the class .navbar-header.

The class .overlay have the list of navigation links that will be displayed or hidden when the button is clicked.

We define the position of the block as fixed which allows us to fix it at a certain point that is defined in the class .overlay. and also we define that when the properties of the element are changed, they will be animated for .35 seconds, causing the menu to smoothly appear.

.overlay {
		position: fixed;
		background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
	}
	.overlay ul li {
		display: block;
	}
	.overlay ul li a {
		color: #fff;
		text-decoration: none;
	}

To activate the menu, displaying or hiding the navigation list when it is clicked, we use the jQuery library. Here is the click event of the button that contains the class top and jQuery “toggleClass” function, adding or removing the “nav-active” class from the menu, making it visible or invisible.

 $('#toggle').click(function() {
		$(this).toggleClass('toggle-active');
		$('#overlay').toggleClass('nav-active');
	});

“ The script is compatible and support in some browsers like google chrome, and not support in IE6 .”

Leave a Reply

Your email address will not be published. Required fields are marked *