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.

By Manoela Ilic in Playground on
Responsive Multi-Level Menu
Demo Code

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">
		<li>
			<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>
				<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>
					</ul>
				</li>
				<li><!-- ... --></li>
				<!-- ... -->
			</ul>
		</li>
		<li><!-- ... --></li>
		<li><!-- ... --></li>
		<!-- ... -->
	</ul>
</div><!-- /dl-menuwrapper -->

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

How to Create a Gooey Search Interaction with Framer Motion and React

3D Typing Effects with Three.js

Image Trail Animation for an Intro

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 195

Comments are closed.

  5. Working amazingly in Chrome 26, FF 19 and IE10. Didn’t try others yet. Excellent!

  9. Lovely menu – although from the demo I’m not seeing any fluid or responsive elements to it?
    In multiple sized viewports on desktop and mobile, it appears consistently as a fixed width menu.

    Maybe I’m missing something, but perhaps using the terms responsive and fluid are somewhat misleading in this instance.

    Still, it’s a lovely menu 🙂

    • Hi Tom,
      thanks for your feedback! The menu has a max-width of 300px but you can set it to something else or remove that and it will adjust to the width of its parent container (100%).
      Thanks again and cheers,
      ML

  11. Wonderful job ! Really useful, I’ll use this as an exemple for our new corporate website ! Thanks !

  17. Love the implementation especially having the levels fade off as it solves the problem of having the levels you have passed being sticky which is usually an eyesore in multi-level menus

  18. This is such an incredibly elegant solution to such a complex problem. Thanks so much for sharing this!

  19. Really cool. The back button needs some work though, it needs to stand out. Maybe also just a big back arrow like foursquare uses it on the current iteration of their ios app.

  20. This is one of the best solutions to the mobile menu problem thus far especially when you have a lot of items to display.

    Thank you for sharing.

  23. Very nicely done, but I believe the menus would be improved if they defaulted, in the absence of Javascript support, to a state in which the hierarchy of links was clear to the user. This could be done, for example, by progressively indenting the second and third levels of links. The indentation would then be overridden by styles that only apply in the presence of Javascript support. Doubtless the default non-Javascript state would only be experienced by a small percentage of users, but it costs next to nothing to greatly improve their experience.

  24. Really nice work!!…But I think maybe that “Back” text could be confusing for some users because they could think that it works like the back button of web browser, I mean, maybe changing by something more clearly that refers to the context we want(the menu).

  25. looks great, however i was instantly wondering why nothing what happening as you would expect the navigation to happen on the hover of the menu items, not by clicking on them.. so for a user the menu isnt that great….

    • Still thinking on “mouse rollovers” experience while we facing a new generation of touch based browsers???

      Think about it, it´s a good thing for everyone to keep control in what they want to see

    • Stuart is right, everyone on desktops and laptops expect hover functions as that’s how it’s been for such a long time so it would be wrong to change that from a UX perspective.

      It works well for mobile devices but it would be nice if it was adaptive as well, to change into a bigger menu for bigger screens – the menu icon is only really needed on a mobile device.

  27. macpatato, agreed.

    With regards to Ivan’s “back” comment, I think that may be dumbing things down a bit too much. It’s context: they clicked the menu and saw immediate feedback. The UI change didn’t happen in some arbitrary spot elsewhere on the page, so I think the majority of users would associate the back link with this menu, not their browser’s back button.

  28. This is a ridiculously awesome design. Love the demo 3 on this. Super responsive with great UX in mind. Cheers and Beers!

  30. This is great, thanks for sharing. I was wondering if this could also work when the parent nav items also link to pages? If that’s built in sorry if I missed it in the demo. More often than not I’m dealing with parent links that are also associated with a page, rather than just being a gate to sub content.

    • Was also looking for this functionality. Anyone have a suggestion on it? I love the menu and it’s easy to implement.

  31. Love it and using it in a responsive website. I was wondering if you thought of a way to href the individual links to a landing page as wel to a subnav. Because that’s a problem i’m facing right now. Ideas are welcome! And thanks for the great demo.

    • hellow patryck 🙂 i visited your page , works great . 🙂 i like your forward arrows . can you pls tell me how can i change the arrows ? pls ? 🙁

  34. 1. Beautiful!
    2. Is there anyone who would like enjoy mentoring me in learning javascript/jquery? Skype: superbrainmary. It would be much appreciated!

  36. This is very nicely done. Great job! I’m looking forward to seeing if I can adapt this to the base WordPress navigation, which would be great. Cheers!

  39. Hi Mary Lou, thanks for this share. I’m not used to comment any article on the web but this menu deserves my respect. The way i found to show it was commenting! I falled in love with the effect at the first time i saw it. It’s Elegant, simple and very inspiring (so inspiring that i can’t imagine websites without this subtil animations).

    I’ve spent a few hours reconstructing your demo from scratch to teach my self what i didn’t know about crossbrowser animations. From the middle i’ve also learned some interesting new CSS properties that make all the difference in any job.

    Many thanks. Keep working because i saw some natural talent on you 😉

  41. In the stock version of this you can’t actually click the top level elements if they have children (because they automatically load the child menu).

    In case anyone needs it, I worked on a little addendum script that clones the parent link into the child so that you don’t need to double-post the parent links inside their child-menus (useful for, say, a WP theme version of this!).

    Link to the script and discussion: http://stackoverflow.com/questions/16381536/jquery-how-to-clone-an-element-into-its-own-child

    • Just a note – from a UI point of view, it’d actually make more sense for ONLY the arrow elements at the right-side of the bar to load the child-menus, not the entire bar… the actual top level parent links should still be clickable in my opinion.

      That said, I get why it’s done this way; the CSS :after selector isn’t clickable (that I know of) and it gets messy if you try to add the arrow as it’s own element.

      This is still an incredible little piece of work – I’m using it as a responsive-only menu on a site right now and it’s lovely now that I have the parent links nested as functional links inside their child menus 🙂

    • Brandon,
      Did you turn this menu into a wordpress version? If so, can you tell me how you did it. Thanks

      Christi

    • Hello. I agree that is was much nicer and practical if the parent link was click-able. I am glad that someone thought of that but i wonder where did you put that piece of code? I have tried to put it in the jquery.dlmenu.js but nothing happened.

    • Forget the post before… i have found the location.
      uuups… you must double click the cloned item for it to work?

  42. Hello! How to replace “square with stripes” on the menu? To something else)

  43. Item li with class=”dl-back” must be added automatically to any ul class=”dl-submenu” , why not?

  44. In order to replace “square with stripes” edit blocks “.dl-menuwrapper button” and “.dl-menuwrapper button:after “in component.css

  45. Hello
    Is there any way to give a callback?
    I use along with your menu script a scroll bar that should be updated so that the submenu is called. Then once the submenu finish appears I have to give this bar an upgrade.

    Have any way to do this? A callback function?

  46. hey, is there any possible way to make it work on IE. at least functionally not visually. IE should be banned

    • Hello, I made it work fine in IE, at least version 8.x.
      See if you are not doing anything wrong.

  47. Hi

    And thanks for the awesome little menu, love it! One question, what do I have to do to make the whole menu align to right corner on the website so that the button is on the right top corner compared to the menu-wrapper. Have tried different ways of floating and setting left % values, but with no success 🙁 Thanks

    • Try this:

      $(“#dl-menu button”).offset({“top”:”0″, “left”: $(window).width()-50});

      In a similar way, you can move whole menus in the desired position.

  48. Hi, I don’t want to click on the button to see the menu. How can I change “jquery.dlmenu.js” right?

  49. Hello Mary Lou. Thanks for the input. As I can do to make it look in IE8? It really does display but the effects do not apply.

  50. Does anyone know of a good way to make the top level be clickable to another page? I am still trying to use this nav, but would like the top level to be a link instead of just opening the submenu.