How to Add a Simple Hamburger Menu

What is a hamburger menu? A hamburger menu is the menu or navigation bar that toggles between being hidden or displayed on the screen when the user clicks the collapsed menu icon, the three horizontal lines, also known as the hamburger icon. These hamburger menus are usually used in responsive websites. Remember that a responsive website is one that resizes itself depending on the user’s viewing area.

 

This tutorial will show you how to create one! You will learn what you need to add to your HTML file, how to use a media query in CSS, and how to use jQuery to code a click event.

 

We will turn this full navigation menu:

 

 

 

 

Full navigation menu

 

Into this:

 

 

 

Collapsed menu with hamburger icon displayed

 

We assume that you are familiar with the concept of a responsive website, have a working knowledge of HTML and CSS, and are comfortable with basic jQuery commands.

 

We will start with three files: index.html, stylesheet.css and myscripts.js. We have set up the HTML and CSS as shown below.

 

 

 

Starting index.html file

 

 

 

Starting stylesheet.css file

 

We have a very basic page with a menu, or navigation bar, across the top. This can be hard to navigate using a smaller screen, so we will have this collapse down to the hamburger menu.

 

At this point myscripts.js is an empty file. Our goal for this file is to code the hamburger icon’s click event to add or remove a class (we will use the class name, responsive) to the menu items (links) which we will use in the CSS media query to toggle them when the hamburger icon is clicked. Clicking the closed menu should open it (display items) and clicking the open menu should close it (hide items).

 

First, let’s start with the HTML file.

 

index.html:

 

  1. The first thing we need to do is set the viewport. In the HTML file, add the following <meta> tag to the <head> area:

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

  1. We will need to load the Font Awesome stylesheet (for the menu icon) and the jQuery library. Add the following tags to the <head> area:

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

</script>

 

  1. As you see in index.html we have our navigation menu as a series of links wrapped inside a <div>. You will notice we don’t have a link for the hamburger icon. We need to add this. Add the following <a> tag below the last link:

 

<a href="javascript:void(0);" class="hamburger" id="hamburger">

       <span class="fa fa-bars"></span>

     </a>

 

Note that we have set the href attribute to “javascript:void(0);” to have the HTML ignore the click; we will use jQuery to deal with the click.

 

  1. Finally, we need to load our .js file. Add the following <script> tag directly about the closing <body> tag.

 

<script src="myscripts.js"></script>

 

Now with our HTML file prepared, let’s move on the the CSS.

 

stylesheet.css:

 

  1. We want the hamburger icon’s initial state to be hidden. To do this we set it’s display to none as follows:

 

.topmenu .hamburger {

 display: none;

}

 

  1. Next, we will use a media query. A media query allows you to use different CSS depending on the screen size. Add the following to the bottom of the file:

 

@media(max-width: 670px) {

 

}

 

This reads almost like an if statement: “If the screen size is less-than or equal to 670px then apply the following CSS...”

 

  1. Inside the media query, we will specify how we want the menu styled when the screen size is 670px or less. Remember that we will use jQuery to add or remove the responsive class to the menu elements. We will toggle this class in order to display or hide the menu when the icon is clicked. With this in mind, we want to:

  • Hide all links but the Home link - We want the user to quickly get back home, so we’ll leave this displayed

  • Display and position the hamburger icon

  • Set the styles for the responsive class

 

Complete the media query as follows:

 

@media(max-width: 670px) {

 

 .topmenu a:not(:first-child) {

   display: none;

 }

 

 .topmenu a.hamburger {

   float: right;

   display: block;

 }

 

 .topmenu.responsive {

   position: relative;

 }

 

 .topmenu.responsive .hamburger {

   position: absolute;

   right: 0;

   top: 0;

 }

 

 .topmenu.responsive a {

   float: none;

   display: block;

   text-align: left;

 }

 

Finally, we will code the hamburger icon’s click event using jQuery.

 

myscripts.js:

 

  1. Remember that the HTML document must be loaded before running jQuery code, so all jQuery code must be inside the ready event.

 

$(document).ready(function() {

<<code>>

});

 

Here we will use the shorthand. Add the following:

 

$(function(){

 

});

 

  1. Inside the ready event, add the hamburger icon’s click event:

 

 $('#hamburger').click(function() {

 

 });

 

  1. Inside the click event, we want to add or remove the responsive class to the menu elements as necessary. To do this, we will use the hasClass(), addClass() and removeClass() methods. Complete the click event as shown below:

 

$('#hamburger').click(function() {

 

   var element = $('#mymenu');

 

   if(element.hasClass('responsive')) {

       element.removeClass('responsive');

   } else {

       element.addClass('responsive');

   }

 

});

 

That’s it! We have learned: how to prepare the HTML file by adding the viewport, calling the appropriate libraries and scripts, and adding the menu icon; how to use CSS to hide the menu icon and use a media query; and how to code the menu icon’s click event in jQuery.

 

See a working example at: https://nicolespoto.github.io/HamburgerTutorial/

 

Nicole Spoto is a web developer interested in working with clients who are obsessed with improving the customer experience. After spending more than a decade reviewing and analyzing technical content for the educational publishing industry, Nicole knows how to navigate the tangled web of computer software and programming languages. Now she’s ready to help you develop the best applications imaginable. Nicole holds a BS in Applied Mathematics from Florida State University and was co-founder of a content quality assurance company based in Boston, Massachusetts. 

 

Share on Facebook
Share on Twitter
Please reload

All Content © Moms Can™ & Co.
Terms of Use & Privacy Policy