Hamburger Drop-down with CSS and JavaScript for Multi-Level Menus – Part 2


September 17, 2014



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 it for touch devices as there is basically no hover function. After a short research we decided to split the functionality into two parts: The menu drop down based on the click on the hamburger and a second toggle function for the multi-level sections.

This means we have the hamburger as a trigger to show the parent menu, and for each parent with children we have an open – close trigger. In the following tutorial you find the required JavaScript as well es the HTML Code-Structure and the CSS.

HTML Structure

If you are using WordPress you don’t have to care about the rendering of the list elements. Just register a new menu or use the existing one and render the list with the wp_nav_menu() function.

If you are using a different systems or a custom HTML site, your list should look like this:


We have add two functions, one to show/hide the menu itself when there is a click on the hamburger and one for the open/close function for menu-links with children.

The second script is adding a +/- to the elements that have children first and than adds the class “visible” to toggle.


Beside the styling of your menu you have to adjust the position of your toggles of the parent elements with children. Be sure you have added the classes “visible” and “expand” to your CSS file as they are the control classes added by the JavaScript.

You find an example of the multi-level Hamburger menu in the mobile view here:

INTERNETKULTUR | © 2019 | Imprint