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. Working amazingly in Chrome 26, FF 19 and IE10. Didn’t try others yet. Excellent!

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

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

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

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

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

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