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: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

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. If i have to trigger the open button (click event) from someother button elsewhere, how can it be done. please help, its urgent….

  2. I am using this menu on a temp page. It works great in all browsers. However, it seems on htc phones it doesnt work. The menu opens, i can click to the first submenu, however once there the back button doesnt work and the links to further submenus dont work. Works great on my iphone however with no issues. Thoughts?

  3. I thought this was great! until I tried it on my Samsung mobile phone (Galaxy Ace II).
    It worked nicely on my laptop at various viewport sizes and on my Nexus 7 tablet however.
    Any apple fanbois tried viewing it on an iphone?

  4. Love the dynamic animation… but its seems to not work in Firefox. The menu appears and you can click to go to a submenu but the moment the animation is finished the submenu disappears and you return to the first level and if you click again all you do is close the whole menu… :-Z

  5. Nice work buddy.,,

    But I want to make it to convert into a ajax website 🙂 in the place of just simple menu. So for this, I want to know that can we replace back button to a fixed top/bottom bar?

    If yes, than plz tell me how can I do it.

    Thnks n regards

  6. Anyone know whether the issue with Android phones has been addressed, or found out a workaround?

    Works perfectly in iOS, and this is easily the smartest, most professional and elegant solution I’ve come across for a mobile-perfect menu system. I’m planning to re-write it so that it behaves completely differently for tablets and PCs with a horizontal menu, and the sub-menus displayed together in a mega-menu type display. I hope this is going to be possible — mega-menus seem the way to go for widescreen devices, but they’re useless on mobile; this solution is perfect on mobile but seemingly overkill on a PC.

  7. Thanks for the tutorial. I was wondering if somebody could help me out a little. I have a single page site and this menu fixed to the top of the page. When you open the menu and click the links it takes you to different parts of the page. The issue I have is that when the link has been clicked the menu stays open. How would I edit the JavaScript to that the menu closed once the link in the menu was clicked? I only have a 5 item list with no sub menus so it’s a very simple menu.

    I guess that if the menu linked to different pages instead of different parts of just 1 page this wouldn’t be an issue.

    Any help is really appreciated.

    Many thanks,

    Matt

    (PS, site isn’t live yet.)

    • Use anchor in menu to identify the parts of your page.

      Search for

      self.options.onLinkClick( $item, event );

      and do something like that :


      var link = $item.find('a').attr('href');
      var hash = link.substring(link.indexOf('#')+1);
      if( hash != "" ){
      var elem = jQuery('div[data-anchor="'+hash+'"]');
      autoScroll(elem);
      self._closeMenu();
      }else{
      self.options.onLinkClick( $item, event );
      }

      autoScroll is a function to do the scroll to the specified part of the page with custom attribute data-anchor.

  8. Partial solution for IE:

    On .dl-menuwrapper .dl-menu , Change :

    translateY(10px);

    to


    translateY(-500px); /*or more depending on position of dl-menu*/

    Just to let it out of the screen.

    • IE 10 Fix
      Rather than translating the menu off the screen, hide the links using:

      .dl-menuwrapper .dl-menu a{display: none;
      }
      and make them appear using:

      .dl-menuwrapper .dl-menu.dl-menuopen a{display: block;
      }
      Enjoy.

  9. Thanks for this. I have a menu code that looks like this.

    {$MENU}

    I can add the first level ul class [dl-submenu] to the first ul above but cannot get the plugin to work for the children ul [dl-submenu] so only the first level is working. Can you please advise? I am not a programmer, just a web designer.

  10. To always show the menu without triggering the “Open Button”, just edit the first :
    <ul class="dl-menu dl-menuopen">
    and hide the Button via CSS

  11. I’m trying to use this in a jPanelMenu but it doesn’t work. Anybody tried ? Or know why the script ain’t executed and the menu stand still ?

    Seems like something’s catching the click or whatever. I’m pretty noob with javascript and have no other ressources to help me out :”( lol so much drama xD

  12. Hello!

    I find this very appealing menu. However, there is one point of criticism!

    The problem:

    One has the “Fashion” page filled with content as in the example, you can not select the menu this. You will be forwarded automatically to the submenus. This is extremely inconvenient, is not it?

    Is there a solution for this. For example, a split link in the same row? One link goes to the page “Fashion” and the second link (an arrow) on the submenu items.

    Thank you so much

    Harald

  13. I was wondering how to change the color, I see that when you download it each of the index pages load with a different color, but how would I go about customizing the menu? If you could just point me to the location of the code I should be able to take it from there.

    Thank You

  14. Nice so far, but the menu overlaps existing content and links underneath the menu are clickable…

  15. Is this possible to apply in wordpress dynamic nav menus? so that when I add new pages, it will automatically added to this responsive menu.

    • Sure it’s possible 🙂 I merged main and secondary navs into a single mobile nav panel. Here’s a code:

      <div id="dl-menu" class="dl-menuwrapper">

      <?php
      if ( has_nav_menu( 'header-menu' ) ) {

      echo ('<ul class="dl-menu">');

      wp_nav_menu( array(
      'container' => '',
      'theme_location' => 'header-menu',
      'sort_column' => 'menu_order',
      'fallback_cb' => 'default_menu',
      'items_wrap' => '%3$s',
      'depth' => '2',
      'walker' => new Main_Nav_Menu
      ));

      wp_nav_menu( array(
      'container' => '',
      'theme_location' => 'header-secondary-menu',
      'sort_column' => 'menu_order',
      'fallback_cb' => 'default_menu',
      'items_wrap' => '%3$s'
      ));

      ?>
      <?php echo ('</ul>');

      } else {
      ?>

      <ul class="dl-menu">
      <?php wp_list_pages( array('title_li' => '', sort_column => 'menu_order', 'items_wrap' => '%3$s' )); ?>
      </ul>

      <?php
      }
      ?>
      </div>

      The trick is to change default WP submenu classes. You can do this with additional JS code:


      $('#dl-menu .sub-menu').addClass('dl-submenu').removeClass('sub-menu');
      $('#dl-menu .dl-submenu').prev().attr('href', '#');
      $('#dl-menu .dl-submenu').prepend('<li class="dl-back"><a href="#">Back</a></li>');
      $('#dl-menu > .dl-menu').prepend('<li class="header"> Navigation </li>');

      You can see how it works here.

  16. I tried to use the menu with a media-query “@media (max-width: 640px) { [component.css styles] }” but the menu doesn’t work in IE10 while using the query. Did anybody else have the same problem?

    • Mathis, I’m having the same issue. When I put the styles into a media query the functionality doesn’t work in ie10. The functionality does work in ie9 however which is strange. It works fine though in ie10 when it isn’t in a media query. Any thoughts?