Create a hamburger icon with CSS

Today's quick code snippet shows you how to create the classic three line hamburger navicon navigation menu for mobile and smaller devices using only CSS. We'll also look at the benefits of using CSS over a traditional graphical icon. 

HTML

For the markup we have just one element for the icon.

<div class="hamburger-menu"></div>

CSS

In the CSS each line is 30px wide with a dark background colour and rounded edges using border radius. We then use the before and after psuedo elements to duplicate the first line and absolutely position them 10px and 20px below the original line. The three aligned bars gives the 'hamburger' effect. 

.hamburger-menu
{
    width:30px;
    height:5px;
    background-color:#111;
    border-radius:5px;
    position:relative;
}

.hamburger-menu:after, .hamburger-menu:before
{
    content: '';
    width: 100%;
    height:5px;
    background-color:#111;
    position:absolute;
    border-radius:5px;
}

.hamburger-menu:after
{
    top:10px;
}

.hamburger-menu:before
{
    top:20px;
}

CSS vs Images

Given the above could easily be achieved with a small graphic, what's the argument for going to the effort of creating it in CSS?

Load Time

So what's wrong with just using a good old gif? Well, nothing really. But if you've got twenty little gifs scattered around your site that could be loaded with CSS, that's overhead of requesting and loading twenty additional files. Looking at the site load times below you can see some files under 4kb have taken 51ms, multiply this by 20 and that's over a second you would shave off your load time.

load-time

Does a second really matter?

Load speed of a page is taken into account when calculating your SEO rank on Google, so if you're a second faster than your competitors then it could make all the difference. You can test how fast your site loads, and how many requests are being made on pingdom if you want to see how you compare to other sites.

Customisation

Another benefit of using CSS to create icons like this is the ease of customisation - rather than having to edit and re-save a graphic when you want to make changes, you can just update your css.

Also imagine if you wanted to have different themes for your site, this is a lot easier if all the icon attributes such as colour can be dynamically changed. 

Compatability

If you do want to use CSS over images, the biggest downside is undoubtably compatability. You can do a lot of awesome things with CSS3 now, but it isn't always guarenteed to work in all browsers, or work in the same way. An image is an image though, it will always look the same without any testing.

Appearance

If you're a fan of software like Photoshop then you'll appreciate that you can get your images looking exactly as you want them to appear. With CSS there can often be a bit of compromise. An upside though is that CSS generated graphics will look equally sharp regardless of zoom scale. They can also be responsive to work with percentages to scale for different screen sizes.  

Conclusion

Ultimately it's not going to make much difference if you choose to use an image or CSS to add one navicon to your site, but if loading performance is something you want to squeeze as much as possible, or you want a flexible design that can easily be customised, then using this technique across your site could make a notable difference.

Demo

Here's an example of the final product, no images required:

Sign Up

NEXT: Build an HTML5 responsive contact form

In this tutorial we'll be using the latest HTML5 form attributes with modern CSS responsive techniques to create a flexible, cross-platform contact form.

comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.