How to Create a Hamburger Menu Using CSS

In website design, the hamburger menu is one of the most popular and useful elements. If you have ever visited any website, you’ve probably seen three horizontal lines in the corner of the screen. When you click on it, a menu or drop-down slides out, which is nothing but a hamburger menu. The hamburger menu is mostly used in responsive websites because it saves space and allows users to easily navigate between different pages. In this blog, we will learn about the hamburger menu and how to create a hamburger menu using CSS with examples and best practices.

Table of Contents:

• Prerequisites
• Hamburger Menu
• How to Create a Hamburger Menu Icon Using CSS?
• Advantages of Using a Hamburger Menu Icon?
• Responsive Navigation Bar with Hamburger Menu
• Accessibility
• Browser Compatibility
• Conclusion

Prerequisites

Before learning about the hamburger menu and the steps to create a hamburger menu in a website, it is important to understand some fundamental concepts of HTML and CSS, like :

• CSS Flexbox
• Pseudo Elements
• CSS Selectors

Hamburger Menu

A hamburger menu is defined as a navigation menu that is hidden behind a button. It is usually shown as three horizontal lines. This button is called the hamburger menu icon because it looks like a hamburger. The menu appears when the user clicks on the hamburger menu icon and is found to be useful in making responsive designs.

How to Create a Hamburger Menu Icon Using CSS?

Creating a hamburger menu icon by using CSS is easy and requires basic knowledge of HTML and CSS. The hamburger menu icon is usually made up of three short horizontal lines stacked on over each other. Here is the code to create a hamburger menu icon by using HTML and CSS:

//index.html

//style.css

body {
background-color: bisque;
}

.menu {
width: 30px;
height: 20px;
margin: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}

.menu span {
height: 4px;
background-color: black;
border-radius: 2px;
}

Output:

In this example, you are creating a hamburger menu that automatically arranges the lines vertically with space in between. You can place it anywhere on the website screen.

Build a Strong Foundation in Web Development

Start Today

Explore Program

Advantages of Using a Hamburger Menu Icon?

Using a hamburger menu icon on websites is important because it makes your website clean and easier to use, mainly on mobile devices. Here are some advantages of using the hamburger menu icon on your website:

1. The hamburger menu saves space on the screen. Instead of showing a full list of navigation links at the top, you can create a hamburger menu and hide all the navigation links behind that.
2. On a smaller screen, space is limited. Thus, using a hamburger menu is good for mobile devices because it only shows the navigation links when the user clicks on the navigation menu.
3. It helps in creating clean and simple designs.
4. Most users are familiar with the hamburger menu icon. They know that the three little lines mean that they have to click here for more.
5. The hamburger menu icon works well on all devices, including desktop, tablet, and mobile phones.

Responsive Navigation Bar with Hamburger Menu

Now, let us create a responsive navigation bar by using a hamburger menu. This example will help you understand more about how the hamburger menu icon is helpful for developers. ☰

//index.html

//style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: darkcyan;
  font-family: Arial, sans-serif;
}

.navbar {
  background-color: #333;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo {
  font-size: 22px;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin: 0 10px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.hamburger {
  display: none;
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #444;
    position: absolute;
    top: 60px;
    right: 20px;
    width: 200px;
    padding: 10px;
    border-radius: 8px;
    z-index: 999;
  }

  .nav-links.active {
    display: flex;
  }

  .hamburger {
    display: block;
  }
}

Output:

Explanation: In this example, you are creating a responsive navigation bar by using a hamburger menu. Here, the ☰ is a Unicode symbol that represents a hamburger menu icon on the website. You are also using media queries to make the navigation bar responsive. The hamburger menu icon is displayed automatically when the screen size is less than or equal to 768px.

Accessibility

Making your hamburger menu accessible is very important. Every user interacts with the website differently. Some people depend on assistive technologies like screen readers, while others will navigate to different pages by using a keyboard. If your hamburger menu icon is not built with proper accessibility, then users may find it difficult to open and use it properly. Here are some tips to create an accessible hamburger menu:

• Adding an aria-label to the hamburger menu icon is recommended so that it becomes easy for screen readers to know what it does. You can use the aria-label attribute to do this.
• Use the role attribute to indicate that this is the button, and the tabindex=”0″ allows users to access hamburger menus by using the keyboard.
• Add a visible outline when the user navigates to the hamburger menu by using the keyboard. This can create a better user experience.

Browser Compatibility

Your hamburger menu icon will usually work great in every browser, but it is good to take some time and check how it behaves in different browsers. Here is the list of some popularly used browsers:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari (Mac/iPhone/iPad)
• Opera Mini

Conclusion

The hamburger menu is a way that helps in organizing navigation links on a website, especially for users who are using mobile and small-screen devices. You can improve the accessibility of the website by using a hamburger menu icon. Adding a hamburger menu is important when you’re creating a personal blog or a business site, because it improves the overall user experience of the website.

To learn more about website design, check out this Web Development course and also explore CSS Interview Questions prepared by industry experts.

How to Create a Hamburger Menu Using CSS – FAQs