Hamburger menu

How to create a burger menu with HTML, CSS, and jQuery


In this article, we are going to explain how to develop a burger-like menu which consists of a fixed button on the navigation bar which, when clicked, shows or hides the side menu containing a list of links, as can be seen below :

Figure 1. View of the desktop browser.

This menu is also responsive, so on screens less than 360px wide it takes up the entire page, like so:


Figure 2. Mobile browser view.

The code

In the header of the page, we refer to our stylesheet (style.css) and both the stylesheet and the Google file containing the Material Icons type fonts. This font file is needed so that we have the hamburger icon in the menu. This reference was made with the tag as following :


In the body of the document, the main part is inside the tags

and

	

Example: Creating a hamburger menu

Site content.
HtmlGoodies Example

  • The button that contains the burger icon, which is used to show or hide the menu, is contained in lines 3 to 5. On line 4, we use the material-icons class from Materialize and with the code “defog”We indicate that the icon to be used is that of the burger;
  • Between lines 5 and 10 we have the list of navigation links that will be shown or hidden when the button is clicked.

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 setting its horizontal position as negative (-300px), as seen 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%; 
	}
}
  • In line 5, we define the position of the block as absolute, which allows us to fix it at a certain point which is defined in line 6 with the left property of value -300px;
  • In line 7, we define that when the item’s properties are changed, it will be animated for 3 seconds, making the menu appear smoothly.

Shortly after, we defined the menu_show this makes the menu 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 performing the menu animation.

Finally, we have the media query which causes the menu to occupy the entire page in screens up to 360px wide.

To activate the menu, show or hide the navigation list when clicked, we use the jQuery library. here is click button event that contains the top class and jQuery’s “toggleClass”Function, by adding or removing the” menu_show”In 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 all. Your menu is done in a few easy steps and works responsively.

About the Author

Diogo Souza works as a 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 the mobile world, and DevMedia consultant.

Leave a Reply

Your email address will not be published.