Responsive Multi-Level Menu

A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.
Responsive Multi-Level Menu

From our sponsor: Try Mailchimp today.

Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the “parent” level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.

Please note: this only works as intended in browsers that support the respective CSS properties.

The structure of the menu contains an unordered list that can have an arbitrary number of sub-lists:

<div id="dl-menu" class="dl-menuwrapper">
	<button class="dl-trigger">Open Menu</button>
	<ul class="dl-menu">
			<a href="#">Item 1</a>
			<ul class="dl-submenu">
				<li><a href="#">Sub-Item 1</a></li>
				<li><a href="#">Sub-Item 2</a></li>
				<li><a href="#">Sub-Item 3</a></li>
					<a href="#">Sub-Item 4</a>
					<ul class="dl-submenu">
						<li><a href="#">Sub-Sub-Item 1</a></li>
						<li><a href="#">Sub-Sub-Item 2</a></li>
						<li><a href="#">Sub-Sub-Item 3</a></li>
				<li><!-- ... --></li>
				<!-- ... -->
		<li><!-- ... --></li>
		<li><!-- ... --></li>
		<!-- ... -->
</div><!-- /dl-menuwrapper -->

Animations are defined in animation classes:

.dl-menu.dl-animate-out-1 {
	animation: MenuAnimOut1 0.4s linear forwards;

@keyframes MenuAnimOut1 {
	50% {
		transform: translateZ(-250px) rotateY(30deg);
	75% {
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	100% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;

.dl-menu.dl-animate-in-1 {
	animation: MenuAnimIn1 0.3s linear forwards;

@keyframes MenuAnimIn1 {
	0% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	20% {
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	100% {
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;

And the plugin is called as following:

$( '#dl-menu' ).dlmenu({
	animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' }

We hope you like this little experiment and find it inspiring!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 195

Comments are closed.

    i’m a beginner of jquery plugins . can anyone help me ??

    i tried this of my html project ,
    my , problem is the back arrow are missing ?
    i copy all the components . but how come ?

    plss help 🙁

  2. I always watch for your blog and use your work where ever application, But with responsive menu i am facing problem. It works fine with FF, Chrome, Opera same but not on browser Mozilla/5.0(Linux; Android 4.2.2; A1-810 Build/JDQ39) AppleWbKit/534.30(KHTML, Like Gecko) Version/4.0 Safari/534.30

    I am using acer table and on default browser sub menus dont show up for some reason and i am finding it hard to fix it. Same problem happen with the actual example done by you.

    Same issue on Android similar browsers.

    • I have the same problem only in Android ;-( but works fine for me on iOS. It would be great if it works on all devices, now i have to find another solution, to difficult for me to fix it

  3. Issue when using this menu on android 2.2 and android 4.0 Parent menu show as usual but sub menus doesn’t work, It seems to hide behind the parent menu. No such issue on chrome. I have not tried this on Apple may be apple has similar issue.

    It would be wonderful to make it work on all devices.

    • I have the same problem, but in chrome. In firefox works perfekt 🙂 I didn’t tried yet on mobile phone. If anybody have a solution, please post it here.

  4. Hey Mary, I really like your menu. Am I allowed to use it (including the click here to open graphic) commercialy in one small project?

    Best regards,

  5. does not work with back ground images and will place its self behind div tags – which makes its un-usable. fit into the locked header container, just didn’t fully work. Witht he back ground image i was pushing it down for some reason that I personally could not figure out.

    • Yeah I think I’m having the same issue, I just pushes everything else out the way when it sits with others in the header container. Z-index isn’t playing nice either, probably beyond my skill-set.

  6. Wow! What a very cool menu this is. Many thanks for dev!
    One moment I’m having troubles with, does any one know how to make the menu close when I click a menu item that doesn’t have sub-menus?
    Any help will be kindly appreciated
    Thanks in advance

  7. Wow! What a very cool menu this is.
    One moment I’m having troubles with, does any one know how to make the menu close when I click a menu item that doesn’t have sub-menus?

  8. Just add last line in config to change back for back to "parent"
    _config : function() { = false; this.$trigger = this.$el.children( '.dl-trigger' ); this.$menu = this.$el.children( 'ul.dl-menu' ); this.$menuitems = this.$menu.find( 'li:not(.dl-back)' ); this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#">back</a></li>' ); this.$back = this.$menu.find( 'li.dl-back' ); $('li.dl-back a').each(function(index){$(this).append(' to '+$(this).parent().parent().parent().parent().parent().find('a:first').text());}); },

  9. I use Modernizr version 2.8.3, but the menu does not appear.
    With version 2.6.2 is ok.

    How can I fix?

  10. Great tutorial, the problem I’m having implementing this is when I try to put the nav button in a header with a search box next to it. I’m trying to work it in using the z-index but the dl-menuwrapper still pushes everything out. Has anyone managed to work this into a header with other divs alongside?

    Any tips would be greatly appreciated.


  11. Doesnt work with WordPress…
    i`ve put this in footer.php

    $(function() {
    $( ‘#dl-menu’ ).dlmenu();


    Uncaught TypeError: $ is not a function

    • Not the author’s fault. Your page hasn’t loaded jQuery or jQuery is aliased to a different character. Make sure you’re loading jQuery and loading it before initializing the plugin

  12. First off, this is such a great menu you have created and does exactly what I was looking for. Secondly, a beginner question, how do you change the colour of the boxes?

  13. menu looks cool but is not responsive to screen size. It would have been great if it looked like a normal top bar navigation on a desktop

  14. This menu is not working on any mobile device, ipad, samsung, iphone. can anyone explain plz?

    • I close menu on click with



  15. Hi,

    very nice menu!

    What can i do if i had a really long submenu ( scrolling ).

    So i can scroll the menu 🙁

  16. I want this menu destroy and reset option added, I added the reset menu myself and it takes me to the start, means open the menu from the first level, even if I am from 2nd or any lower level. Then I tried trigger click of elements which can take me to the next level but that work but menu is closed automatically. Can you help me to resolve, actually I am adding new levels by ajax after initializing the menu, so if I don’t do reset menu newly added levels don’t work. I want this to work, and remain at the same level where menu was opened.

  17. Thanks, this is really cool menu. I have included this in my static HTML pages but I am getting an error “Uncaught TypeError: $(…).dlmenu is not a function”. Any idea why his problem has arised.

  18. How can I make it so clicking on one of the top level items(What you click to open up a submenu) takes you to an anchor point at the top of the page?

    I tried the following with no luck…

    <a href=”#top” rel=”nofollow”>Brady Haran</a>

    I’m not sure what else to try, I feel like that should work but it doesn’t. I have some very long menus that evolve scrolling down the page to read them all. It is frustrating to have to scroll back up to the top of the page every time I open up a new submenu.