dcsimg

Creating a Hamburger Menu with HTML, CSS and jQuery

By Diogo Souza

https://www.htmlgoodies.com/beyond/cms/creating-a-hamburger-menu-with-html-css-and-jquery.html (Back to article)

In this article, we will explain how to develop a burger-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, as we can see below:


Figure 1. Desktop browser view.

This menu is also responsive, so that on screens with width less than 360px it occupies the entire page, as follows:


Figure 2. Mobile browser view.

The Code

In the header of the page we refer to our stylesheet (style.css) and both stylesheet and Google file containing the fonts of Material Icons type. This fonts file is required for us to have the burger icon on the menu. This reference was made with the <link> tag as follows:

<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

In the body of the document, the main part is inside the <header> and <nav> tags, which contain the hamburger button and the menu links list, respectively, as we can see below:

<body>
	<header>
		<h1>Example: Creating a hamburger menu</h1>
		<div class="top">
			<a href="#" class="menu_icon"><i class="material-icons">dehaze</i></a>
		</div>
	</header>
	<nav class="menu">
		<a href="#" class="item_menu">home</a>
		<a href="#" class="item_menu">about</a>
		<a href="#" class="item_menu">products</a>
		<a href="#" class="item_menu">services</a>
		<a href="#" class="item_menu">contact</a>
	</nav>
	<main>
		Site content.
	</main>
	<footer>
		HtmlGoodies Example
	</footer>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>

</body>

In the style.css file, the most important section refers to the formatting of the navigation block, which is originally hidden. This is done by defining its horizontal position as negative (-300px), as we see below:

style* { margin: 0 auto; font-family: sans-serif; }

body { margin: 0 auto; }

header {
	height: 70px;
	background-color: #3e739d;
	border-bottom: 1px solid #494949;
	display: flex;
	align-items: center;
	justify-content: center;
}
header > h1 {
	width: calc(100% - 160px);
	text-align: center;
	font-size: 20px;
	color: white;
}
header > .top {
	position: absolute;
	left: 20px;
}
header > .top a.menu_icon i {
	color: #000;
	font-size: 40px;
	padding-top: 5px;
	transition: .2s ease;
}
header > .top a.menu_icon:hover i {
	color: #fff;
}
nav.menu {
	width: 300px;
	min-height: calc(100vh - 121px);
	background-color: #03a9f4;
	position: absolute;
	left: -300px;
	transition: .3s all;
}
nav.menu > a {
    display: block;
    padding: 5px;
    margin: 15px 0 0px 20px;
    color: #494949;
    text-transform: uppercase;
}
main {
	width: 100%;
	padding: 30px;
	box-sizing: border-box;
}
footer {
	height: 50px;
	background-color: #494949;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 0;
	position: fixed;
	width: 100%;
}

.menu_show {
	left: 0!important;
}

@media screen and (max-width: 425px) {
	header h1 {
		font-size: 16px;
	}
}
@media screen and (max-width: 360px) {
	nav.menu {
		width: 100%;
		left: -100%; 
	}
}

Shortly after, we set the menu_show that causes the menu to appear when setting its horizontal position to 0. This class is added and removed via jQuery, and when this is done, the previously defined transition is triggered by doing the menu animation.

Finally, we have the media query that makes the menu occupy the whole page in screens up to 360px wide.

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's "toggleClass" function, adding or removing the " menu_show" class from the menu, making it visible or invisible, as follows:

$(document).ready(function() {
	$("body").on('click', '.top', function() {
		$("nav.menu").toggleClass("menu_show");
	});
});

And that's it. Your menu is done in a few easy steps and working responsively.

About the Author

Diogo Souza works as Java Developer at Fulcrum Worldwide and has worked for companies such as Indra Company, Atlantic Institute and Ebix LA. He is also an Android trainer, speaker at events on Java and mobile world and a DevMedia consultant.