Multi-Level Push Menu

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

MultiLevelPushMenu

View demo Download source

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

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 197

  1. 1

    Oooops. I think my first reply had a hiccup. So let’s try again.
    Always amazing stuff to see here. Everything works fine so far for me, but I’m really not good at coding and what I would like to achieve is a further dynamic page load for the content-wrapper. It would be great if not the whole page reloads.
    I try some tutorials from css-tricks but couldn’t get it to work. Maybe you have a hint or a sample according to your code?!

    Any help is appreciated. Best. Sebastian.

  2. 3

    Hey i want to add this menu style to my project website, but when i merge code of my page what happens is the menu stays up and then my code’s desgin i want to put this menu in my page please help me with its CSS..

  3. 5

    Hello! I appreciate this wonderful menu. It is very well built ;)

    I would just like to know if it was possible to make one more feature, which is for example a button that is in the body, and that when clicked redirects the menu for a part of it.

    Example: Clothes button that when clicked opens the menu tab on apparel.

    In the link below, is a project that you have found this functionality, but would like to possibly do the same in your menu because I’m using it;)

    Project Link Download: https://github.com/adgsm/multi-level-push-menu

    (ex: expandcollapse)

    Thank you very much.

    I expect a response from you ;)

    Best Regards,

    Ivo Reis.

  4. 7

    OMG – what great code – I am having difficulty making the links in the menu work – do not know what is wrong – when I click the link it does nothing!

    Any directions?

  5. 9

    Hy Mary Lou ;)

    Can you put one more demo (Demo 4) that has a button that when clicked, automatically opens the menu in a specific category?

    Example: “Button – Go to Devices / Televisions”

    Thank you very much.

  6. 10

    Hi

    I love what you do on this site, it is so engaging and inspirational. I wish I could show my site, but my work cannot be displayed. Quick question,
    I like the push menus and the interactions; I was wondering, if it is possible to hide the push menu upon scrolling. For instance if the push menu is exposed and then upon a scroll event, I want it to retract. Is this possible?

    Thank you,
    Sam Shoulders

  7. 11

    i loved the design, my question is it possible to fix the scrolll bar on the menu. because i am having huge number of items. Any body can help me?

  8. 12

    Just wondering if anyone knows how to move the menu to the other side of the screen so that it opens up on the right.
    I tried tinkering with it yesterday, but could only get as far as moving to the other side, and having it overlap… incorrectly. Any help would be appreciated.

  9. 14

    ISSUE:
    If you have more items in the menu then the height of your display you cant get to them … the menu cant scroll down!

  10. 17

    In this , the content get hided while showing the menu, Is it possible to shrink the content? In my project i need this adjustment.. guide me to do this “shrink the contents”

    • 19

      I found the solution:

      add new function:


      function closeMe(){
      var container = document.getElementById( &#039;st-container&#039; );
      classie.remove( container, &#039;st-menu-open&#039; );
      };

      the call it in menu


      <li><a class="icon icon-star" href="#" onclick="closeMe();">Exit1</a></li>

  11. 20

    PROBLEM:

    For mobile users, (android or iOS) when you tap on a menu item that contains a submenu, whatever menu item that WOULD be directly ON TOP OF the parent item you just tapped is “tapped” and goes to that page. The only way to get it to not “self tap” the child item is by long pressing the parent item and then dragging your finger off the menu after the submenu slides in. Then you can tap any of the submenu items you want. Has anyone experienced this?

  12. 21

    Hello,

    I am trying to use this menu with jquerymobile, and i couldn’t trigger it when new page loaded, because it’s loads content with ajax.

    When i try to init it in pageinit function, it’s break. Any suggestions?


    $("#wrapper").live('pageinit',function() {
    new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
    });

  13. 23

    having problem while scrolling . in this , menu i have a huge list of data in menu. for example: Level-1 has 40 elements and Level-2 has 20 elements
    i am scrolling level-2(is top most level) and it has 20 elements means it scroll to the end after that it shows the elemnts of level-1(parent of level-2).
    How can i stop showing of the elements from level-1 while scrolling level-2

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>