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: Reach inboxes when it matters most. Instantly deliver transactional emails to your customers.

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 -->

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.

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 195

Comments are closed.
  1. 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.

  2. 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).

  3. 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.

  4. 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.

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

  6. 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.

  7. 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 ? 🙁

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

  9. 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!

  10. 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 😉