Multi-Level Push Menu

An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.

From our sponsor: Try Mailchimp today.

Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.

Working with nested structures is quite tricky because when we, for example, move the parent then all children will of course move as well. So we are using a couple of tricks that will maintain the right 3D translates for the sub-menus and their children. The main idea is to increment the value for the translate so that we guarantee that the sub-levels are not shown once we push everything a bit more for showing the slices of the parents. This is of course not necessary in the case where the sub-menu is covering the parent menu.

Please note that we are using 3D Transforms which only work in modern browsers. You will find a fallback example for non-supporting browsers in the end of the component.css file where we simply show the first level menu. The same we do for the no JS case.

We are using the following nested structure for the menu:

<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
	<div class="mp-level">
		<h2 class="icon icon-world">All Categories</h2>
		<ul>
			<li class="icon icon-arrow-left">
				<a class="icon icon-display" href="#">Devices</a>
				
				<div class="mp-level">
					<h2 class="icon icon-display">Devices</h2>
					<ul>
						<li class="icon icon-arrow-left">
							<a class="icon icon-phone" href="#">Mobile Phones</a>

							<div class="mp-level">
								<h2>Mobile Phones</h2>
								<ul>
									<li><a href="#">Super Smart Phone</a></li>
									<li><a href="#">Thin Magic Mobile</a></li>
									<li><a href="#">Performance Crusher</a></li>
									<li><a href="#">Futuristic Experience</a></li>
								</ul>
							</div>

						</li>
						<li class="icon icon-arrow-left">
							<!-- ... -->
						</li>
						<li class="icon icon-arrow-left">
							<!-- ... -->
						</li>
					</ul>
				</div>
			</li>
			<li><!-- ... --></li>
			<!-- ... -->
		</ul>
	</div>
</nav>
<!-- /mp-menu -->

…where each level is wrapped into a division with the class mp-level.

Normally, we would have used fixed positioning for a menu of this kind but since there is quite an peculiar “problem” with that (transforms will make it behave like an absolute positioned element), we’ll have to use absolute positioning which will leave us with some unwanted behavior of the site (scrolling of menu and dependence of document height). So we’ve used a little trick to avoid the menu being scrollable or to be cut off if the site’s content is too short by using the following page structure:

<div class="container">
	<!-- Push Wrapper -->
	<div class="mp-pusher" id="mp-pusher">

		<!-- mp-menu -->
		<nav id="mp-menu" class="mp-menu">
			<!-- ... -->
		</nav>
		<!-- /mp-menu -->

		<div class="scroller"><!-- this is for emulating position fixed of the nav -->
			<div class="scroller-inner">
				<!-- site content goes here -->
			</div><!-- /scroller-inner -->
		</div><!-- /scroller -->

	</div><!-- /pusher -->
</div><!-- /container -->

Where we set the following styles for the elements:

html, 
body, 
.container,
.scroller {
	height: 100%;
}

.scroller {
	overflow-y: scroll;
}

.scroller,
.scroller-inner {
	position: relative;
}

.container {
	position: relative;
	overflow: hidden;
	background: #34495e;
}

This will allow the content to be scrolled when the menu is closed and it will also make the menu being 100% of the window height. Basically, we are emulating what fixed positioning would do here.

This is how the plugin can be called:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
Or, if the submenus should cover the previous levels: 
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {
	type : 'cover'
} );

For the demos we are using the beautiful Linicons iconfont by Sergey Shmidt created with the help of the IcoMoon app.

We hope you enjoy this menu and find it useful.

Tagged with:

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

Feedback 261

Comments are closed.
  1. since this have a problem with older browser is there a possibility that we can create multi level push menu into jquery? Using animate function for 2 divs moving to right? Those 2 divs are menu and content? for ex $(‘.menu’).click(function(){ $(this, ‘#content’).animate({left:’250px’});}); ?? then add effects like easeIn,etc

  2. very nice indeed!

    I was wondering if there is a way to have 2 push menu on the same page. So you can trigger each menu separately.
    I duplicated the script as follow:
    new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ), {
    type : ‘cover’
    } );
    new mlPushMenu( document.getElementById( ‘mp-menu2’ ), document.getElementById( ‘trigger2’ ), {
    type : ‘cover’
    } );
    and i duplicated the nav and changed the id to have a nav with id mp-mennu2 and a trigger with if trigger2.

    but only the second trigger is working. If i click on the first trigger, it still opens mp-menu2.

    Does anybody have an idea on how to get that result.
    thks

  3. Is there a way that on ex.3 the nav bar can always visible and then the layers can push over it. I am wanting it to be a fixed side nav always visible rather than having to click the “menu” button to reveal the nav bar.

  4. Getting this error when I click on the icon to expand the menu. Using FF.

    TypeError: el is null
    el.style.WebkitTransform = val;

    mlpushmenu.js line 221

    Any suggestions?

  5. Is there an easy way to have this function the same way, but open on the right side of the screen?

  6. Is it me or can’t I visit the “Television” page? All it seems to do is load the children.

    While it looks nice and has it’s merits, it seems quite useless if I can’t get to the “television” page from the menu.

    • Look at my latest comment. When using the idea with the sidr plugin you can have the navigation also on the right side of the screen.

      cheers

    • Using Developer tools get …

      CSS3111: @font-face encountered unknown error.
      zLhfkPOm_5ykmdm-wXaiuw.eot

  7. Hi,
    I had the problem that this navigation doesnt work for larger menus and on the internet explorer below 9. I found this idea really neat so I tried out a complete new approach making the navigation work in older browsers (without css3 animations). I used a combination of the jquery sidr plugin, some jquery click-events and css3 transitions. The result: less html-code for the navigation itself (it’s now a simple ul-list), less css classes, less js struggle.
    But anyway, thanks a lot for the inspiration!!!

    Cheers

    • Same boat as Adam and Thomas. Would really love to see your solution to this. I’m having the same issues.

    • Hi Dietmar,

      please could you share your optimized code?
      It would be a great help, thanks in advance!

    • I know it’s been a while since this have been posted, but I’m currently working on implementing this awesome menu. However, I’m struggling quite a bit with IE8 & 9. So would really love to hear a little more about your experiences with optimizing the plugin for IE. Thanks in advance.

      /Aske

  8. This is a really elegant solution for large navigations.

    Don’t forget -webkit-overflow-scrolling: touch; to apply smooth, elastic scrolling to the scroller wrapper on iOS.

    Also instead of height: 100% try min-height:100% . That will allow the menu to scroll vertically for long menus.

    • Do you have already an answer on this? At the moment I’m stuck with the same problem… I would love to use it for my internal app – so there is no need to open/close the main menu…

      Thanks

      Oli

  9. Hello Mary. Interesting menu here. I’ve a question. On mobile devices, does this support swipe feature just like apps menus do? Facebook Youtube etc. I wanna be able to open/close it not just by touching the hamburger icon, but also to swipe left/right. Please reply. Thanks.

  10. Has anyone tried any functionality for active links? For instance, a person is on a page that is linked from this menu and when they go to the menu the section with the link is open and the link is highlighted.

  11. To make it scroll I added:
    .mp-level { overflow-y: hidden; } .mp-level-open { overflow-y: auto; } .mp-level-overlay { overflow-y: inherit; } .mp-menu ul { overflow-y: hidden; }

    • I added this to make the menu scroll:
      .mp-level.mp-level-open:not(.mp-level-overlay) > ul { height: 100%; overflow-y: scroll; -webkit-overflow-scrolling:touch; }

    • This causes a white block to appear left of the menu when hitting the back button in Chrome, IE and Firefox. I didn’t try it on any mobile browsers. It only happens for a fraction of a second, but it’s distracting and causes the whole menu to lag a bit. (But, sorry, I haven’t found a better solution).

    • Also, lei cao’s solution won’t scroll to all content if there is a back button or heading above the ul because the 100% height will be the full height of the window while the menu will not start at 0 (it will instead start after the heading and back button).. Adding padding to the bottom works in Chrome, but not IE or Firefox. Again, I haven’t found a better solution just yet. I’ll let you know if I do..

    • Hi, I had the same situation. Needed to scroll the menu, but with
      .mp-level { overflow: scroll; }
      Had a blank bar in the left.
      This code made the scroll works, but in android has some weird reactions that makes all menus appear and disappear. And, in iOS and Android the first menu returns to top when open submenus.
      However, this is the best solution to scrolling menu that have found, thanks a lot.

  12. Thanks for this amazing idea. Btw how can I add triggers to open/close the menu with keys? Like M to open and ESC to close.

  13. I’ve loving this push menu – thank you!

    One question, is there an easy way to have the first mp-level of the menu visible at page load without needing to use the open/close menu trigger?

    • Hi Ryan,

      For having the menu load automatically I did something like this:
      mainMenu = new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), { type : 'cover'}); mainMenu._openMenu();

      And that should sort it for you.

    • Hi Jon. You code works perfectly. I tried it on something I am working on. However what I am trying to do is when I click on links to other pages it still reverts back to the top level of the menu. It doesn’t show where you are exactly inside the menu even if you are on a different page. Do you perhaps know how this can be done?

      I have tried using classes with the <a> tags to see if it will work but no luck….Help will really be great.

      And to Mary Lou…Great work. Very impressive ๐Ÿ™‚

    • Hi Crispian,

      Sorry for the late reply, I have actually just solved this using jQuery. You may need to do some adjusting, but this solution works for me.

      jQuery(document).ready(function(){ jQuery("#mp-menu .menu-item a").each(function(){ if(jQuery(this).attr('href') == window.location.href ){ jQuery(this).parents('.mp-level').toggleClass('mp-level-open'); jQuery('#mp-menu > .mp-level').toggleClass('mp-level-open'); } }); });

    • Hy Jon!

      Can you put a link (http://jsfiddle.net) with example of what you did, or a example that has a button that when clicked, automatically opens the menu in a specific category?

      Example: โ€œButton โ€“ Go to Devices / Televisionsโ€

      Because I need control the levels of the menu, example, if Iยดm on Televisions page, when i click on menu, the menu open in the Televisions Category.

      Thank you very much.

      Hope you can help ๐Ÿ˜‰

  14. I just noticed an issue…not sure if anyone else is having the same issue. But…when I attempt to go to a page anchor via a menu option with sublevels, it doesn’t go to the anchor. So below…the page won’t go to the ‘THISONE!!!!’ anchor. Why won’t it?

    All Categories

    Devices

    Devices

    • @jDub: I am having the exact same issue. Everytime I click on a link of a sub menu. It goes to the page but it does not show or display where you are in the menu or basically the heading of the menu does not stay.

  15. Hi,
    I love the ease and design of your menu ๐Ÿ™‚ but wondered what I would need to “fire” to get the menu to close once you have selected a menu option?
    Thank you for your help in advance and great menu ๐Ÿ™‚ (again).

    Mark

    • Actually I just realised I could use “variabe”.resetMenu() on the click function of the – Doh

      Thank you anyway ๐Ÿ™‚

      I have it working really well with Backbone Marionette ๐Ÿ™‚

      Thank you again…

    • look at mlPushMenu prototype…
      //…
      _init : function() {
      // if menu is open or not
      this.open = false; // just change it to true

  16. it looks great on firefox ,but I’m afraid this is useless if you ignore one of the most popular browser today,chrome. Anyway good job!

  17. Hello,

    first very nice work, but i have question :

    how i can set the menu perma open, also without a Initiator to open/Close,

    because i Need use it in Frame, ๐Ÿ™

    thx for help

  18. The fallback options aren’t working for browsers that don’t have 3d transforms. Has anyone come up with a fix?

  19. Hi there. Does anyone perhaps know how I can keep the state of the link clicked to show where I am in the menu levels. I need to be able to store the state of the menu as it is clicked because it keeps going to the top level when I click a link inside the menu. I tried disabling the self._resetMenu(); in mlpushmenu.js but it did not work as I figured that might be what to disable in the code.

    When a link is clicked it should just show the category title of links you are on because I will be using a breadcrumb to display the depth of the levels.

    Help will be awesome ๐Ÿ™‚

  20. Hi!

    This is an amazing menu. I’m currently attempting to implement into a WordPress Theme I have going. At current I’ve managed to get it implemented fine. There were issues with the Linecons Icons so they were replaced with Font-Awesome Icons instead (matching the Theme) and have resolved that issue.

    The main issue is that upon first opening the website you are unable to click links / scroll the page down at all until you have clicked the menu icon to trigger the menu and then close it again. It appears as if the ‘overlay’ is preventing anything from happening. Some research seemed to indicate it was due to a bug with the version of jQuery being called which using the Fix has not worked.

    The site in question is http://www.korthcore.com as well as http://www.theoverindulgence.com (same issue, different sites, same theme).

    If there are any pointers that would be great! ๐Ÿ™‚

    Chris

    • Did you managed the WordPress solution with multiple WordPress Menus or did you only used one?

      Thanks for the reply ๐Ÿ™‚

  21. First, I would like to congratulate with Mary Lou for this awesome menu, and I want to ask you all, if it’s possible to close it each time I click on a menu item.

    I don’t like to:
    > open the menu
    >> click on the XPAGE anchor
    >>> and then click again on the body (or on the close icon) in order to see the XPAGE content.

    I’d like to:
    > open the menu
    >> click on the XPAGE anchor
    >>> see the menu closing by itself and showing the XPAGE content.

    Any help would be appreciated.
    Thank You in advance,
    J.

  22. Hi all….Still having a problem with the push-menu not being able to keep the state of where the push menu is without it resetting itself to the top level of the menu. If the following code can be used to keep the menu open at all times:

    var mainMenu = new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ) );

    mainMenu._openMenu();

    is it not possible to do something similar like this to keep a sub-level open even when a link is clicked? but obvoiusly changing the id tags accordingly?

    var subMenu = new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ) );

    mainMenu._openMenu();

    • Crispian, Did you ever get this figured out? Some info would be great
      cheers
      + Any idea if this menu can be implemented horizontally?

    • Go to the plugin file:
      _resetMenu : function() { this._setTransform('translate3d(0,0,0)'); this.level = 0; // remove class mp-pushed from main wrapper classie.remove( this.wrapper, 'mp-pushed' ); this._toggleLevels(); this.open = false; },

      Comment the line this._toggleLevels(); this way when you close the menu, the state of the menu will be keeped , no matter what level you where before closing.

      Using this, combined with the modification by @csanchezriballo (on comment page three) jsfidlle you can add a "mp-close class" dynamically to your links when you click on them, and close the menu without reseting the menu state.

      hope that helps!

  23. Great code again very nice looking.
    Any chance of this working horizontally instead of vertical?
    And how do I keep the menu displayed and as Crispian was asking is there anyway to maintain the menu location once a submenu item is activated?
    Cheers

  24. Oof… I loved the look, loved the smoothness of the menu and how it flowed and was multilayered… But alas my dreams were broken because the actual content of the page you’re looking at on a mobile device gets significantly choppy scrolling, and my phone is new and powerful! That’s it, my constructive criticism. Also, should add that it seems the component.css is the culprit.

  25. Easy and nice menu experiment ๐Ÿ˜‰ . How can we change the position from left to right display? HELP!!!!!!!! ;'(

  26. Running the menu on a site, and it gets really slow and choppy scrolling. (tested on iphone 4s, 5 and 5s and samsung galaxy tab)
    Has anyone figured out a solution for it?

    -webkit-overflow-scrolling: touch; doesn’t seem to do the job.

    Thanks in advance
    Renato

  27. I’m hoping someone can help me with issues on a site that does require scrolling. Has anyone used this successfully or made any changes that allowed for smoother scrolling of the site?