Build a Mobile Hamburger Menu

JavaScript > Build a Mobile Hamburger Menu

The devices people use to browse the web vary in size. We often want a website to look different on small devices (i.e., mobile phones) than on larger ones (i.e., computers). We see this concept illustrated by the frequent use of hamburger menus.

In this beginner-friendly tutorial, we will build a responsive mobile hamburger menu using:

✶ HTML
✶ CSS
✶ JavaScript

A regular side menu will display on large devices, and a hamburger menu will display on small ones.

YouTube Tutorial: Mobile Hamburger Menu

YouTube Tutorial: Mobile Hamburger Menu

What is a Mobile Hamburger Menu?

A hamburger menu is a navigational menu that can be excessed by clicking on an icon with three horizontal lines:

When the user clicks on the icon, the menu gets displayed. When the user clicks on the icon again, the menu disappears. Hamburger menus are handy for mobile devices, that have a smaller display area.

Today's Mobile Hamburger Menu in a Repl.it


Project File Structure

mobile-hamburger-menu
  index.html
  style.css
  main.js


Project Functionality

Next, we will identify the functionality of our menu and determine how we will accomplish each task.

index.html

The first file we will work on is index.html. If you do not understand the basics of HTML, you can have a look at my HTML tutorials. I will go through a basic consruction of the page and link relevant tutorials.

Step 1: Basic Page Structure

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Step 2: Page Head

In the page head we have our page title and links to our style sheets. We are linking style.css (the CSS file we are about to make) and the fontawesome library. We are using fontawesome for the hamburger icon and social media icons.

<head>
  <title>My Hamburger Menu: JavaScript + HTML + CSS</title>
  <!-- Our CSS File-->
  <link rel='stylesheet' type='text/css' href='style.css'>
  <!-- Fontawesome Librbary -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>

      Step 3: Page Body

Mouse Hover over the ➼ blue text in the descriptions to highlight the code decribed.

<body>
  <!-- Mobile Hamberger Menu Icon (Mobile Only) -->
  <button onclick="toggle()" id="ham-button" class="ham-button"><i class="fas fa-bars"></i></button>
  <!-- Side Menu Container -->
  <div class="side-menu" id="side-menu">
    <!-- Side Menu Heading-->
    <h3>Menu</h3>
    <!-- Side Menu Links -->
    <a href="https://www.codingcommanders.com"><i class="fas fa-globe"></i> Website</a>
    <a target = 'blank' href='https://twitter.com/codingCommander' ><i class="fab fa-twitter"></i> Twitter</a>
    <a target = 'blank' href='https://www.facebook.com/codingcommanders/'><i class='fab fa-facebook'></i> Facebook</a>
    <a target = 'blank' href = 'https://www.youtube.com/codingcommanders'><i class="fab fa-youtube"></i> YouTube</a>
  </div>
  <script src="main.js"></script>
</body>

Description

➼ button - This is a button that displays as the hamburger menu. When the user clicks it, the function ➼ toggle() is executed and the menu will appear. When it is clicked again, the menu disappears. This button will only display on small devices. In our CSS and JavaScript, we can refer to it by the ID ➼ham-button or the class ➼ ham-button.

➼ side-menu - This is our side menu. It includes an h3 heading and navigational links. It can be referenced by its class side-menu or its ID side-menu

➼ Script Link - Here is where we link the JavaScript file main.js, where we will write the toggle function.

      Complete Code for index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Hamburger Menu: JavaScript + HTML + CSS</title>
    <!-- Our CSS File-->
    <link rel='stylesheet' type='text/css' href='style.css'>
    <!-- Fontawesome Librbary -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  </head>
  <body>
    <!-- Mobile Hamberger Menu Icon (Mobile Only) -->
    <button onclick="toggle()" id="ham-button" class="ham-button"><i class="fas fa-bars"></i></button>
    <!-- Side Menu Container -->
    <div class="side-menu" id="side-menu">
      <!-- Side Menu Heading-->
      <h3>Menu</h3>
      <!-- Side Menu Links -->
      <a href="https://www.codingcommanders.com"><i class="fas fa-globe"></i> Website</a>
      <a target = 'blank' href='https://twitter.com/codingCommander' ><i class="fab fa-twitter"></i> Twitter</a>
      <a target = 'blank' href='https://www.facebook.com/codingcommanders/'><i class='fab fa-facebook'></i> Facebook</a>
      <a target = 'blank' href = 'https://www.youtube.com/codingcommanders'><i class="fab fa-youtube"></i> YouTube</a>
    </div>
    <script src="main.js"></script>
  </body>
</html>

style.css

Next we create style.css. This is the code that styles our menu. You may find it helpful to view my CSS tutoirals. I will go over the code and link supporting tutorials.

Media Queries

Before we write our CSS code, let's define a media query. Media queries are a way to write conditional CSS code. Given a screen size, we will apply different formating.

We will use the code below to tell our web browser to display the hamburger menu button (#ham-button) and not to display the side menu (#side-menu) when the user's screen width is 768px or less. In CSS, we us # when we reference an element by ID and a . when we reference elements by class.

/* Switch to hamburger menu on small devices */
@media only screen and ( max-width:768px) {
  #side-menu {display: none;}
  #ham-button {display: block;}
}

CSS Transitions

Transitions are a way to progressively change a specific property (i.e., width, color, opacity) when a particular event occurs. We write the transition in different ways to maximize the number of web browser that can properly read the code.

In this project we use transitions to gradually change the text and background color of links inside the side menu.

.side-menu a:hover {
  background-color: darkred;
  color: white;
  -webkit-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -moz-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -o-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  transition: background-color 0.6s ease-out, color 0.6s ease-out;
}

Step 1: Default Formating

The following CSS will apply if other formatting isn't specified. Other formatting can be specified by using an element's class name or ID.

body {
  background-color: black;
}

/* general link formate*/
a {
  text-decoration: none;
}

➼ body - The page body's default background is black.

➼ a elements By default, navigational links are not underlined.

Step2: Side Menu

Next, we will style the side menu container and the links that it contains.

/* Side Menu Container */
.side-menu {
  background-color: #111;
  padding: 10px;
  border-radius: 9px;
  color: #F4FFFE;
  font-family: Helvetica, sans-serif;
  box-sizing: border-box;
  width: 25%;
}

/* Side Menu Links */
.side-menu a {
  display: block;
  color: #818181;
  padding: 8px;
  font-size: 26px;
  border-radius: 6px;
}

/* When mouse hover on links in side Menu */
.side-menu a:hover {
  background-color: darkred;
  color: white;
  -webkit-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -moz-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -o-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  transition: background-color 0.6s ease-out, color 0.6s ease-out;
}

/* Side Menu Heading */
.side-menu h3 {
  padding: 8px;
}

➼ side-menu - Here we format the container that holds our side menu content (heading and links). We specify the text and background colors, padding, border radius, and font family. The default width of the container is 25% of its parent element and the width will include padding and margins (border-box).

➼ side-menu a - Here we style the links inside the side menu. We have the links display as block.

➼ side-menu a:hover - This CSS happens when the user mouse hovers over a link contained in side-menu. We are changing a link's background-color and text color on hover. We want the color to change over .6 seconds gradually.

➼ .side-menu h3 - We add padding to h3 headings in the side-menu container.

Step 3: Mobile Hamburger Menu

Lastly, we write the CSS to make the mobile hamburger menu appear only on small devices, and the side menu only appear on large devices. 

/* Hamburger Menu Button */
#ham-button {
  display: none;
}

/* Switch to hamburger menu on small devices */
@media only screen and ( max-width:768px) {
  #side-menu {display: none; width: 100%;}
  #ham-button {display: block;}
}

➼ #ham-button - #ham-button refers to the ID of our mobile hamburger menu button. By default, the button will not display.

➼ @media only screen and ( max-width:768px) - If a user is on a screen that's width is less than or equal to 768, the side menu (side-menu) will not display and the mobile hamburger button (#ham-button) will display as a block element. The width of the menu on small devices is 100%.

main.js

Finally, we are ready to add a JavaScript function to main.js. If you want to learn more JavaScript and build JavaScript projects, please visit the site's JavaScript Tutoirals.

function toggle() {
  // Declare variable menu
  let menu = document.getElementById("side-menu");

  // toggle code
  if (menu.style.display === "block") {
    menu.style.display = "none";
  }
  else {
    menu.style.display = "block";
  }
}

document.getElementById("ham-button").addEventListener("click",toggle);

➼ toggle() - This function executes when the user clicks the mobile hamburger menu button.

➼ Declare Variable - We declare a variable named ➼menu and set it equal to our ➼ side menu container.

➼ If Statement - This is a JavaScript if statement.

➼ If the menu is being displayed as block element it will disappear.

➼ In all other cases it will be displayed as a block element.

➼ Event Listener - Our application is listening for someone to click the element with ID "ham-button", so it can execute toggle().


Recommended Tutorials