Hamburgers!

 1 minute read /  Resources

Hamburger Menus.

You may be wondering what a hamburger menu is? Hamburger menus are generally illustrated by 3 horizontal lines, usually on the top right or left of the website/app you’re viewing. Generally hamburger menus are associated with mobile websites. See below for an example:

Once a hamburger menu is clicked it is meant reveal a panel containing additional options or pages. If you’re browsing this site with a tablet or mobile device then you will have noticed this is what we use:

Today, we’re going to take it a little too literally and create a pure CSS hamburger icon. The end result will look a little like this:

Again, we will be using SCSS (Sassy CSS) to create the hamburger icon. Firstly, we’ll define our variable colours for the bun, lettuce, cheese and burger and also setup the container in which the burger will sit.

$bun:#df9220;
$cheese:#ffdf00;
$burger:#793914;
$lettuce:#5dae00;

.burger {
  width:50px;
  height:40px;
  span{
    display:block;
    width:100{3eb5e81dc2dbd5243766a445dfd7203b99614852f30724c0fcd7c1e47478fab9};
    margin-bottom:3px;
    transition:0.2s all ease;
  }
}

Next we’ll setup a button to contain our burger as below:

<a href=”#0″ class=”burger”>
<span class=”bun top”></span>
<span class=”patty”></span>
<span class=”bun bottom”></span>
</a>

Now, time to start writing some SCSS to make it resemble an actual burger. Lets begin with the buns, we’ll be nesting some additional classes for the top and bottom buns as they will slightly differ in appearance, for instance, we’ll have some lettuce on the bottom bun which will be done with a simple green border.

  .bun {
    height:8px;
    background:$bun;
    &.top {
      height:10px;
      border-top-right-radius:9px;
      border-top-left-radius:9px;
    }
    &.bottom {
      border-top:2px solid $lettuce;
      border-top-left-radius:1px;
      border-top-right-radius:1px;
      border-bottom-left-radius:3px;
      border-bottom-right-radius:3px;
    }
  }

We’ve also made the top bun slightly larger and given it more of a border radius.

Now for the burger, very similar to the bottom bun but this time with a cheese border. we’ll also make it look as if the cheese has flapped over the burger using an absolute positioned pseudo element and a triangle made of CSS.

  .patty {
    background:$burger;
    height:8px;
    border-radius:3px;
    position:relative;
    border-top:2px solid $cheese;
    &:before {
      position:absolute;
      left:10px;
      top:-1px;
      content:'';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 5px 0 5px;
      border-color: $cheese transparent transparent transparent;
    }
  }

The end result is a some-what realistic hamburger menu icon created entirely with CSS.