Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Posted by Stu Cowley
Stu Cowley
26,287 Points

How Can I Create a Hamburger Menu?

Hi everyone,

I'm currently at the stage of a site that I'm building where I need a hamburger menu, and I'm having a tough time on how to actually create one. I have Googled and read many articles and I simply cannot find any resources on how to build a basic one from scratch using CSS, and JavaScript.

Can anyone suggest anywhere where I can find any tutorials and/or articles on how I can create a hamburger menu. I'm surprised this was never actually taught on this site.

Any advice on this would be greatly appreciated!

Thanks

Stu :)

Stu Cowley
Stu Cowley
26,287 Points

Just to mention also, I'm looking to display the menu when a user taps on the menu icon. Sorry I didn't add this to my post.

I'll include the code I'm using for my menu.

.main-nav {
margin-top: 5px;
}

.name a,
.main-nav a {
    display: block;
    text-align: center;
    padding: 10px 15px;
}

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

.main-nav a:hover {
    color: #093a58;
}

@media (min-width: 769px) {
    .main-nav {
        float: right;
    }

    .main-nav li {
        display: inline-block;
        margin-left: 15px;
    }
}

Just to point out also, this is using the Nav Menu that Guil Hernandez used in the Layout Basics course.

4 Answers

Christopher Mlalazi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points
Christopher Mlalazi
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points

Have you done JavaScript and jQuery yet? If not, you can google open source and you will get various examples of code of the hamburger menu which you can fork and use, or learn from. Check codepen you can search for the hamburger menu there and this is what I got: http://codepen.io/search/pens?q=hamburger+menu&limit=all&type=type-pens

Ian Hazelton
Ian Hazelton
6,187 Points
Ian Hazelton
Ian Hazelton
6,187 Points

Sometimes I'll use FontAwesome if other icons are needed in the project. It's quick and easy. Alternatively, It can be done in pure css. Type codepen+hamburger into google and you'll find thousands of examples. JS is optional i would say.

fngr
fngr
11,179 Points
fngr
fngr
11,179 Points

I think you can't do this with CSS alone. You'll need JavaScript or jQuery ;)

Stu Cowley
Stu Cowley
26,287 Points

Whoops, forgot about JavaScript haha.

Chyno Deluxe
Chyno Deluxe
16,935 Points
Chyno Deluxe
Chyno Deluxe
16,935 Points

Here is a quick menu I put together. While when I initially read the post. I thought you meant only creating the hamburger menu icon but readying it again I am assuming you want the menu in its entirety.

Here is a step in the right direction: jsFiddle Demo: Hamburger Menu Icon

While this doesn't include hiding and displaying of the menu itself, it is set up to do so with a little alteration of the javascript to your html and css.

I hope this helps.