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 >

INTERNETKULTUR | © 2019 | Imprint