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. Hi Mary Lou,
    Every post you put on Tympanus is truly a Masterpiece; an enchanted phenomenal experience for all browser users! This post is no less.

    I have been trying all sorts of JavaScript-ing from doing a variety of toggles, toggle (Z-indices), show/hiding to testing and trying every CSS alternative I could put together, in enabling a website to have multiple triggers to different #mp-menu (nav’s). The only problem is that I am able to get another menu, but the the other menu pusher has a div in front of it, so the buttons cannot be clicked on the second mp-pusher menu. What do I do?

  2. This is awesome! Thanks!

    I was wondering if the menu can start open when the user enters the website, and when the user chose to close, it works open/close.

    Had anyone try this?

    • To let the menu to be open all the time, just search for this line:
      <ul class="dl-menu">
      and change it to
      <ul class="dl-menu dl-menuopen">

      For the open/close button, hide it with css

  3. Truly Awesome Work! Is there a way to setup menu to click outside of menu to close as well?

  4. Thanks Mary Lou, awesome job like always. I need to use two menus in one page. Made it work but there is a problem, when one menu is clicked and opened, and go to the second one, first menu won’t close. Any help with that? I don’t know how to call the closeMenu function when clicking another element on the page.

    • Never mind. I got it. I don’t know if it’s really right but it works. As follows:

      Added this line to the original Plugin just at the beginning.

      var pluginName = 'dlmenu';

      Initialize and close other menu when press dlmenu


      $(function() {
      var $menu1 = $( '#dl-menu-1' ).dlmenu();
      var $menu2 = $('#dl-menu-2').dlmenu();
      $menu1.mousedown(function() {$menu2.data('dlmenu').closeMenu()});
      $menu2.mousedown(function() {$menu1.data('dlmenu').closeMenu()});
      });

  5. What if the submenu li is also a link to a page? Then that page becomes unnavigable because every time you want to see it, you get that page’s submenu.

  6. Looks really nice, good UI solution in responsive webdesign, except for the fact that it’s not working so good in IE, even 10. When using IE10, move your mouse over de area where the submenu items appear. And click in this area, the menu goes wacko. Seems like IE10 already rendered the menu, except it’s invisible.

  7. Hi It is possible to solve the problem on IE10
    When using IE10, mouse over Menu area where the submenu items appear link items appear. Click in this area, the menu visible and hide

  8. The easiest way to let it work on IE is:

    add this ->
    z-index: 19; ( the number is your choise)

    to
    .dl-menuwrapper button

    i used it for a test markup
    http://www.movingpencil.de/demo
    you can test it with IE9 and IE10

    Hope this will be helpful 😉

    • i forget to add this :

      the cursor isnt changed by this but i am searching for a method like:
      cursor:default; to deactivate it for ie.

  9. This is truly one of the most elegant mobile menu solutions I’ve come across for complex multi-level menus – it’s perfect except for one thing… You really need to be able to have a link on a parent item that goes to a landing page rather than always linking to the sub-level menu. A convention that’s used in less-elegant solutions is to have the text in the menu link to the parent page, and an arrow icon to the right of the link text actually open the sub-menu. There’s a JQUERY plugin called Slicknav that uses this convention but your sliding nav panels are so beautiful. I know these are “demos” but if you ever decided to revisit them and add the parent level linking that would be AMAZING. BTW your UI work is inspirational 🙂

  10. Hello Mary Lou … i would like to thank you for this amazing menu, it helps me a lot with my project, redesigning the OpenCart admin area … you can see the results here 🙂 — http://opencartdemo.vagabondlabs.com/admin/ — username: admin password: demo —

    Ok, i am not a brilliant programmer and did not figure how can i make the drop down menu activates on MouseOver? … can you please help me with this.

    Thank you a million times for this menu, it really helped me a lot.

    Have a great and colorful day!
    Daniel

  11. Dont think the menu is working properly now. No functionality when clicked on the button. I think the javascript is not running for some reason. Anyone else having this issue?

  12. it is possible that the “sub” is hidden after a few seconds “tot”? how can I do? thank you so much! great menu!

  13. Awesome and thanks! I’d like to align the menu (the little square) at the top left of my window so I can keep the rest of my window for other elements. How can I position it there?

    Thanks!

  14. Great tutorial. Just curious if there is a way to make the menu open with the submenu active if you are on a page within that submenu? Thanks!

    • Great job!
      But I need this, too. Open the active submenulevel. Is there a solution for this?

  15. Hi Mary,

    It an awesome effect. I want to use this for one of my pages.
    How can I show the menu without button, but still have the same effect.

  16. Can anyone help with this problem.

    I need to open an external html file in an iframe on clicking on the main menu, as well as open the submenu.

    Tried solving it in the ‘jquery.dlmenu.js’ but couldn’t solve the problem. The submenu opens but the external does not load 🙁