Simple Hamburger Drop-down Menu with CSS and JQuery – Part 1

Published

July 15, 2014

Category

Development

Especially for mobile websites, the Hamburger menu icon become kind of a standard nowadays. In this tutorial you find a quick and simple solution to create a drop-down and a Hamburger icon with CSS. JQuery allows you to create a toggle function with just a few lines of code that adds and removes css classes and actually you do not need more.

HTML Structure

You just need one div-container that wraps everything you want to show/hide. In our case I want to toggle a menu so we have a list of menu items. The Hamburger Icon is created just with CSS, so we do not have to use any image file.

JQuery

There are two possibilities to show and hide the menu. We can have a “toggle” Button or an open and close button. Basically both work in the same way. A click on the Hamburger (menu-btn) adds the class “expand” to the class “responsive-menu”. The “AddClass” – Script removes the “expand” class via click on the close button, the “Toggle” – Script changes this if a click-event happens.

CSS

Finally we have to create our styling. This contains beside the standard styling of the menu-items the “Hamburger” icon and most important the “.expand” class. The initial state of the “responsive-menu” is “display:block;”.

Examples

You find examples of the Hamburger menu (mostly in the mobile view).
http://www.austrianstartups.com
http://www.hotel-burgmeier.de 
http://www.kufstein.at

Continue to Part 2 for Multi-level Menus support >

  • JB

    In your toggle function it should read

    $(‘.responsive-menu’).toggleClass(‘expand’)

    Lower case ‘t’ on toggleClass

  • Really Useful, straightforward tutorial… Was easily able to implement on the default Prestashop menu

    • asd

      hi mayman, just wondering if you could help exactly where to put the code in prestashop? thanks and glad you got it working!

  • @JB: Thank you! We already fixed the function!

  • @maymanukdesign:disqus Thx! – We are happy you like it!

  • Marco Boffo

    Nice tutorial but lacks of multi levels menus.

  • Hi,
    Thanks for your valuable presentation of hamburger menu.
    I have been attempting to use the code in sidebar of blogspot blog. I have not succeeded. What should I be doing to make it work in blogger?

  • Pingback: Top 30 Free jQuery Navigation Menus()

  • Elmira Hashemi Pour

    can i use this for desktop?

    • Dear @elmirahashemipour:disqus,
      you can use this script for a desktop version of your website as well.

  • Nenad

    Thank you very much, I’ve spent a lot of time trying to find this explanation!

  • Juul van Bracht

    Do you have a finished download? it does’t work!
    The download inclusive the drop down please, -Juul

    Gr8 job!

    • It works out of the box – if it doens’t work on your site, your code is interfering with it (or you’re not including jQuery).
      All the code you need is in the boxes above – there is no download.

  • Heavily modified it for my own needs – thanks for the base 🙂

  • Sharon Shobana Vasudevan

    ive tried this . but my biggest problem is . when i click on the icon, there is no changes. its supposed to have a dropdown effect. do you know how to solve it

    • @sharonshobanavasudevan:disqus: We would need more information to help you…
      Did you check if Jquery is included properly and there are no JavaScript error on your site?

      • Sharon Shobana Vasudevan

        these are the screenshot. from the line ive highlighted. i used jquery mobile since im tasked to create for a mobile website. ive tried a few versions. but it doesnt work.

        • Dear @sharonshobanavasudevan:disqus, your JavaScript looks quite different to our code we’ve posted above.

  • Top

  • ptliko

    thanks for the awesome tuts for mobile toggle menu! I have questions for the menu:
    1, how to make the + symbol align to the related parent ?
    2, it just show only one + symbol on the right hand side if i add one more sub menu?

    • Dear @ptliko:disqus,
      you have to add a “position: relative;” to the li-item (.menu-item-has-children{ position: relative;}) to be able to adjust the position of the open-close element. – We have already updated the CSS code at JSFiddle.

      If you add more submenus, the symbol will be added to each of them.

      • ptliko

        thanks for prompt reply. will try

  • Euan

    When I launch it in my browser, I click on it but nothing happens..I have got jQuery working fine, not sure what to do?

    • Dear Euan,
      Can you check the following points:
      1) There are no JavaScript errors
      2) The CSS is correct
      3) The HTML structure is correct.

      If you like, post a link of you site so we could have a quick look on it.

  • Pingback: JQuery basic questions - Tech Magazine()

  • Jenny Lovett

    hello! this is great – I’m attempting to implement it on this WordPress template – Im afraid that adding it will cause a conflict with the existing existing desktop menu which I don’t want to change – and/or that the the script that runs the existing hamburger menu (mobile layouts only) will keep this from working – any suggestions before i cause myself huge headaches? thank you so much!

    • Dear @jenny_lovett:disqus
      we have sent you an Email with the code.

  • Jenny Lovett

    oh oops heres the link to existing site – http://thebrandid.com/firstbay

  • Dear @hescobar:disqus,
    basically the menu of http://www.kufstein.at is based on the above code. In this case we were using the toggle function to create the menu overlay, but to structure the menu we set up three custom menus, one for each column to be more flexible.

  • Pingback: Interactive Map Project – A Working Stage 1 Prototype – Jambonium()

  • Aled Pink

    Hey, my code isn’t closing the menu properly, but it’s opening fine. Do you have any recomendations?

    • Dear @aledpink:disqus,
      can you send a link to your site so we can have a look on your code?

      • Aled Pink

        Sorry, I’ve changed it to an Accordion, due to time constraints. Thank you for replying though!

  • Amanaka

    Even as I copy all of the code precisely as you wrote it and make no changes to it, the first jQuery option you listed above only works when clicking to open the menu, but it doesn’t work when you click to close it. The second option (the toggle) does work, but I need to use the first option so that I can change the closing button to an ‘X’ when it’s in that state. So, my problem is the same as Aled Pink.

    Thanks for providing such a simple solution without a heavy amount of JavaScript, by the way. If you have a solution to this one little bug, though, I would really appreciate it. 🙂

  • Nic727

    @internetkultur:disqus Is it possible to add transition when opening the menu? I’m trying to make it going from height: 0 to height: auto (full height, because 100% is not working) and it doesn’t very well. Thank you.

    Edit : Nevermind, it’s just that with height in % it’s not working, so I made my animation with opacity and max-height instead of display:none and height %;

    Also, Do you know if it’s possible to remove the menu when people are clicking outside it?

    • Dear @nic727:disqus,
      you can add a click handler detecting, if someone clicks outside the menu container.
      This should look something like this:

  • Nienke

    My Jquery isnt working? I tried to put it in a seperate javascript file and linked the javascript to the html but it says there are some problems in the javascript text

    • Dear @disqus_8idyhYssR9:disqus,
      without seeing the error messages, it is difficult to help you…

      • Nienke

        CSS is working all fine but the button itself won’t work because even when i drop the script line in html itself, it doesn’t work

  • Norman Chan

    Works great. Thank you very much. Best explanation I’ve seen so far.

  • Deepankar Chauhan

    Use this CSS for a better effect.

    .responsive-menu{
    max-height:0;
    background:#999999;
    width:300px;
    overflow:hidden;
    transition:all .25s;
    }

    .expand {

    max-height:300px;
    }

    But a really great example. Easy and effective 🙂 .

  • Pingback: Hide Hamburger Menu On Specific Page (Front Page/Home Page) * Best Wordpress Themes - Reviews()

  • Selman Tunç

    thx

  • Pingback: Multimedia Planning and Design | Nana Naskidashvili's Blog()

  • Cindy Soderlund

    How do I place an image next to the hamburger button?

    • Dear @cindy_soderlund:disqus ,
      It depends what you would like to achieve exactly, but please try an CSS :before or :after selector.

More Articles

  • Hamburger Drop-down with CSS and JavaScript for Multi-Level Menus – Part 2 A few weeks ago we published a blog post how to create a SIMPLE HAMBURGER DROP-DOWN MENU WITH CSS AND JQUERY. There was a request to extend it for multi-level menus and so here we go: There are several different methods to solve multi-level drop-down menus. The challenge is to develop […]
  • Simple dynamic JQuery Accordion with Advanced Custom Fields In this tutorial we are going to show you how to create a dynamic accordion using the Wordpress Plugin "Advanced Custom Fields" and its Add-On "Flexible Content Field". We are going to use the "Simple JQuery Accordion" of  CSS-Tricks as a base and adapt it to our needs. You find an […]
  • Simple Slider with Advanced Custom Fields and OWL Carousel A lot of websites have a image slider. Most of the time there is just a simple slide effect required and it is not necessary to use a huge JavaScript library like the Revolution Slider or the WooSlider. We have been using the OWL Carousel for several different web-projects and we are […]
INTERNETKULTUR | © 2017 | Imprint