Multi-Level Push Menu

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

From our monthly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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:

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

Receive our bi-weekly Collective or official newsletter right in your inbox.

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 261

Comments are closed.
  1. I found the solution to my problem where menu was showing open on IOS when hitting the browser back button.
    There might better solution to implement in the plugin js file itself, but my js knowledge is limited.

    I simply use jquery removeClass to remove the “mp-pushed” and “mp-level-open” class as well as changing the style attribute to “-webkit-transform: translate3d(0, 0, 0)”


    jQuery('.my_link').click(function(){
    jQuery('#mp-pusher').removeClass('mp-pushed');
    jQuery('.mp-level').removeClass('mp-level-open');
    jQuery('#mp-pusher').attr('style','-webkit-transform: translate3d(0, 0, 0)');
    });

    So when you click/tap a link, you see the menu closing using the animation before loading the requested page.

    Cheers

  2. Hi all!

    i’ve question:

    how can i activate swipe effect in all smartphone mobile screen?

    Not only with the “box menu” but the effect start with swipe in all smartphone screen.

    I need the first version to smartphone mobile, and i tested it on Google Chrome (Android Kitkat). And it’s all ok, but doesn’t work the swipe effect.

    Thank you!

    • Well, I was searching comments for some other problem regarding this push menu… but found your post as the latest in comments..

      For sliding event you could check on the jQuery MOBILE Events: http://api.jquerymobile.com/category/events/#post-34

      So when then slide happens, you could add a .click function to it as a function process…. I’m not good at jquery or javascript, but this was just a general idea I thought of when reading your comment/question.

      Do let me know if you succeed in it, as I could use the code for my project as well !!

  3. There appears to be issues with this package and the version of chrome, see https://github.com/Modernizr/Modernizr/issues/590. It seems that on some versions of chrome Modernizr returns a false negative. On other versions all is well. In particular on Chrome Version 28.0.1500.71 (I believe this is the current version) the package does not work.

    I’d like to be able to use the package and am willing to help develop a fix.

  4. Is there a simple way to make it so that the overlap is shown on the left side instead of the right?

    • Yes, there is!
      Just switch all transforms from

      transform: translate3d(-100%, 0, 0);

      to

      transform: translate3d(+100%, 0, 0);

      in the CSS-Files.

      In the JS-file switch the signs in the CSS-transitions as well
      In fact replace line 185 with

      this._setTransform( 'translate3d(-' + translateVal + 'px,0,0)' );

      and line 194 with

      this._setTransform( 'translate3d(+100%,0,0) translate3d(' + levelFactor + 'px,0,0)', levelEl );

      and line 221 with

      this._setTransform( 'translate3d(-' + translateVal + 'px,0,0)' );

      This should do the trick.

    • Sorry I Forgot some left vs. right CSS-Values.

      .pusher {
      /*left: 0;*/
      right: 0;
      }
      .mp-level {
      /*left: 0;*/
      right: 0;
      }
      .mp-menu {
      /*left: 0;*/
      right: 0;
      }

  5. I really like this effect and plan to make use of it, so thank you for creating and sharing it with us.

    It’s too bad the behavior for browsers that don’t support transforms is pretty much an afterthought, though. I’d like to see a bit more of a progressive enhancement approach, and in this case I think it would be fairly easy to reveal all the menu levels with absolute positioning as a fallback with modernizr classes to activate it.

    Sounds like I just created a project for myself 🙂

    • Did you work something out? 🙂 I’m working on implementing this in IE8+ and would like to hear your experiences.

  6. Hi, I’ve tried to change it to slide from right to left without success.
    Any quick tricks?

    Please help.

  7. If I want the menu first level always open? I tried to change translate 3d to 0 in menu-level class, but it don’t worked fine.

    • Hi Dixon,

      Please help me out when i use this code, menu is disabled (functioning but am not able to see menu) please help me to fix this 🙁

  8. Hello all,

    Thanks for the awesome piece of coding Mary Lou. Not to beat a dead horse, but I have seen many people asking how to make the menu slide in from the RIGHT. Any chance you would give us that modification or maybe a hint? (I will dance at your wedding & I have a few moves)

    I assume we need to change the CSS positioning as well as the transformations being set in the mlpushmenu.js? Correct?

    • I too need this (awesome) menu showing up on the right for a project of mine but it doesn’t seem as though anyone has worked out how to do it. 🙁

      Would really appreciate some help on this or if anyone has worked out how to do this, to share their solution.

  9. How can I use this jquery plugin for a wordpress website? Is there any way to use this on wordpress?

    Thanks.

    • You can use this on wordpress. It took me a couple of hours but you need to adjust the wordpress nav structure very slightly.

  10. Hi Mary

    I use your MULTI-LEVEL PUSH MENU I clicked your menu item but it doesnt work. How can I work click item ?

  11. I think it’s safe to say there is no support from the team at tympanus for this menu anymore 🙁

  12. Hi.

    Am using this code for mobile site but when i use “-webkit-overflow-scrolling: touch;” the menu is disabled 🙁 Can u please help me out Please..

  13. To show MENU

    Only comment in mlpushmenu.js:

    if( this.level === 1 ) {
    //classie.add( this.wrapper, ‘mp-pushed’ ); <——
    //this.open = true;
    }

    And use the next code

    mainMenu = new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ), {
    type : ‘overlap’});
    mainMenu._openMenu();

    • By the way, I needed to make the menu to be opened when the document is loaded, but keeping the option of closing it too if I wanted, so what I did is:

      Comment in mlpushmenu.js:

      if( this.level === 1 ) {
      classie.add( this.wrapper, ‘mp-pushed’ );
      //this.open = true; <——
      }

      And keep in the html the code provided by Daniel just the way he did it:


      mainMenu = new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ), {
      type : ‘overlap’});
      mainMenu._openMenu();

  14. I’ve used this plugin to one of my websites and I’m loading pages with ajax. So after load a page on complete I wanted to close the menu. So on my function I did this:

    At the start of my function:
    side_menu = new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

    Then inside my complete
    I called the function as : side_menu._resetMenu()

    You can also close the menu with $('body').trigger('click') but I think is not that right.

    Hope this helps to someone.

    Thanks ML

    • I can’t make it work 🙁 could you please paste your code? It would be very appreciated…

  15. Hello, this is a great piece of work.

    Maybe I’ve missed some previous comments (so probably the following issue has been discussed already): it is possible to make scrollable each menu levels? If I have a menu level with many elements that extend below the fold, it is possible to get a scrollbar (desktop) or finger swipe on mobile?

    Ciao
    Paolo