CSS Hamburger Menu

This article contains a tutorial that shows how to create a responsive CSS hamburger menu (off-canvas menu) with CSS and jQuery.

Hamburger menus are useful when your navigation bar contains too many buttons to fit into a mobile screen. It allows creating a compact menu that is fully shown only when you click a button that looks like a hamburger.

One of the popular ways to create a hamburger menu is to use jQuery and CSS to create an animated hamburger icon that turns into an X symbol when the menu is fully shown.

Here’s a CodePen demo showing the end result:

HTML

First, create two identical blocks with menu links. For semantical reasons, it’s recommended to put them inside the <ul> list nested inside the <nav> element.

One menu block will have the .desktop class, and the other one the .mobile class. The .desktop class will be hidden on mobile screens, and the .mobile class will not be visible on large screens.

The trigger to slide out our menu is an <a> element with a nested <span> element. The parent element should also have the .mobile class.

    
        
<nav>
    <ul class="menu desktop">
        <li><a href="" class="menu__item">Listings</a></li>
        <li><a href="" class="menu__item">News</a></li>
        <li><a href="" class="menu__item">Blog</a></li>
        <li><a href="" class="menu__item">About us</a></li>
        <li><a href="" class="menu__item">Contact us</a></li>
    </ul>

    <a class="menu__icon mobile"><span></span></a>
    <ul class="menu mobile">
        <li><a href="" class="menu__item">Listings</a></li>
        <li><a href="" class="menu__item">News</a></li>
        <li><a href="" class="menu__item">Blog</a></li>
        <li><a href="" class="menu__item">About us</a></li>
        <li><a href="" class="menu__item">Contact us</a></li>
    </ul>
</nav>

Set-Up Styles

Before we start designing our hamburger menu, let’s create some basic CSS rules to hide/show the menus on mobile or desktop screens and to make the desktop menu look more like a navigation bar.

Let’s say we use SCSS and our breakpoints are as following:

    
        
$viewport_size: (
  s: 320px,
  m: 768px,
  l: 1200px
);

First come the CSS rules for mobile devices:

    
        
a { cursor: pointer; }
ul { list-style: none; }
.desktop { display: none; }

Next, create rules for large screens: apply display: none; for the .mobile class and display: flex; or display: block; to the .desktop class:

    
        
@media (min-width: map-get($viewport_size, l)) {
  .mobile {
    display: none;
  }

  nav {
    padding: 3% 6%;
    background: #7eb4e2;
  }

  .desktop {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
}

Hamburger Icons

Now, let’s design the hamburger icon. We won’t take ready-to-use icons but use CSS rules instead.

First, create a hamburger icon that will be visible on mobile screens before you click. The .mobile__icon element should be positioned absolutely. You also need to create CSS rules for the icon’s size and background. Don’t forget z-index to make it visible on top of the menu when it’s shown.

    
        
.menu__icon {
  height: 32px;
  width: 43px;
  margin: 3%;
  position: absolute;
  top: 10px;
  right: 3%;
  display: inline-block;
  vertical-align: middle;
  z-index: 20;
}

.menu__icon span {
  display: block;
  background: blue;
  width: 100%;
  height: 4px;
  margin-top: -2px;
  position: absolute;
  left: 0;
  top: 50%;
}

.menu__icon:before and .menu__icon:after will be used to draw the rest of the hamburger icon.

    
        
.menu__icon:before,
.menu__icon:after {
  content: "";
  display: block;
  background: blue;
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  transform-origin: center center;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.menu__icon:before {
  top: 2px;
  margin-top: -2px;
}

.menu__icon:after {
  bottom: 2px;
  margin-bottom: -2px;
}

Later, when you click on the icon, your mobile menu will be shown and your hamburger icons will transform into an X-icon. To achieve this effect, rotate your icon by 45 degrees by applying the following CSS rules:

    
        
.menu_shown .menu__icon span {
  background: transparent;
}

.menu_shown .menu__icon:before {
  top: 50%;
  transform: rotate(45deg);
}

.menu_shown .menu__icon:after {
  bottom: 50%;
  transform: rotate(-45deg);
}

Other Styles

Next, you need to transform your mobile menu so it slides smoothly. First, add transform: translateX(-100%); to hide the menu and then add transform: translateX(0); to show it when the .menu_shown class is applied. To add this class, you will need jQuery (it’s the next step).

Note tour menu’s z-index should be lower than z-index of your icon.

    
        
.mobile.menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  text-align: center;
  padding-top: 112px;
  background: #7eb4e2;
  z-index: 10;
  transition: all .4s ease-in-out;
  transform: translateX(-100%);
}

.menu_shown .mobile.menu {
  transform: translateX(0);
}

.mobile .menu__item {
  display: block;
  line-height: 2;
  padding: 25px 0;
}

jQuery

Finally, add the following short code to make your mobile menu slide in when you click on the hamburger icon:

    
        
$(document).ready(function() {
  $('.menu__icon').click(function(){
		$('body').toggleClass('menu_shown');
	});
});

Again, here’s the CodePen to demonstrate what it looks like when it all comes together:

There are also other ways to create hamburger icons. Here are some examples:

Popular Tags