Simple Hamburger Drop-down Menu with CSS and JQuery – Part 1

Published

July 15, 2014

Category

Development

Especially for mobile websites, the Hamburger menu icon become kind of a standard nowadays. In this tutorial you find a quick and simple solution to create a drop-down and a Hamburger icon with CSS. JQuery allows you to create a toggle function with just a few lines of code that adds and removes css classes and actually you do not need more.

HTML Structure

You just need one div-container that wraps everything you want to show/hide. In our case I want to toggle a menu so we have a list of menu items. The Hamburger Icon is created just with CSS, so we do not have to use any image file.

<div class="mobile-nav">
     <div class="menu-btn" id="menu-btn">
	<div></div>
	<span></span>
	<span></span>
	<span></span>
     </div>

     <div class="responsive-menu">
        <ul>
           <li>1. Object</li>
           <li>2. Object</li>
        </ul>
     </div>
</div>

JQuery

There are two possibilities to show and hide the menu. We can have a “toggle” Button or an open and close button. Basically both work in the same way. A click on the Hamburger (menu-btn) adds the class “expand” to the class “responsive-menu”. The “AddClass” – Script removes the “expand” class via click on the close button, the “Toggle” – Script changes this if a click-event happens.

<script type="text/javascript">
	jQuery(function($){
    	$( '.menu-btn' ).click(function(){
    		$('.responsive-menu').addClass('expand')
    		$('.menu-btn').addClass('btn-none')
    	})
    	
    	 $( '.close-btn' ).click(function(){
    		$('.responsive-menu').removeClass('expand')
    		$('.menu-btn').removeClass('btn-none')
    	})
  	})
 </script>
<script type="text/javascript">
	jQuery(function($){
    	     $( '.menu-btn' ).click(function(){
    	     $('.responsive-menu').toggleClass('expand')
    	     })
        })
</script>

CSS

Finally we have to create our styling. This contains beside the standard styling of the menu-items the “Hamburger” icon and most important the “.expand” class. The initial state of the “responsive-menu” is “display:block;”.

.menu-btn div {
	position: absolute;
	left: 100%;
	top: 64%;
	padding-right: 8px;
	margin-top: -0.50em;
	line-height: 1.2;
	font-size: 18px;
	font-weight: 200;
	vertical-align: middle;
	z-index: 99;
}

.menu-btn span {
	display: block;
	width: 19px;
	height: 3px;
	margin: 4px 0;
	background: rgb(0,0,0);
	z-index: 99;
}

.responsive-menu{
	display: none;
}

.expand {
	display: block !important; 
}

Examples

You find examples of the Hamburger menu (mostly in the mobile view).
http://www.austrianstartups.com
http://www.hotel-burgmeier.de 
http://www.kufstein.at

Continue to Part 2 for Multi-level Menus support >

INTERNETKULTUR | © 2018 | Imprint