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 >

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 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 […]
  • 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 […]
INTERNETKULTUR | © 2018 | Imprint