Multi-Level Push Menu

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

By Manoela Ilic in Playground on August 13, 2013

Demo Code

From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Grab a Codrops Signature T-Shirt featuring our brand-new logo design! Get an exclusive 20% discount with CODROPSTRIBE20

Feedback ²⁶¹

Comments are closed.

pabloo January 10, 2014 at 09:16

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
Sergio Pinna January 10, 2014 at 12:35

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!
- Mohit January 11, 2014 at 17:05
  
  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 !!
rbell01824 January 13, 2014 at 14:45

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.
A1MlezZ January 13, 2014 at 18:17

The menue is great, but I needed this as always open, how and where do I change this?
ahs13 January 13, 2014 at 18:46

Is there a simple way to make it so that the overlap is shown on the left side instead of the right?
- joekolade February 21, 2014 at 11:36
  
  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.
- joekolade February 21, 2014 at 11:55
  
  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; }
- fred February 21, 2015 at 01:55
  
  @joekolade thank you are a life save!
Gabriel January 14, 2014 at 00:29

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 🙂
- McAsh May 8, 2014 at 23:49
  
  Did you work something out? 🙂 I’m working on implementing this in IE8+ and would like to hear your experiences.
Christina January 14, 2014 at 10:18

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

Please help.
- joekolade February 21, 2014 at 11:37
  
  Hej Christina,
  
  see reply on comment #6!
Eric dos Reis January 18, 2014 at 13:24

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.
dixon January 20, 2014 at 09:08

Scrolling on iOS Overflow Elements
http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
- kiran February 12, 2014 at 10:11
  
  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 🙁
Travis Hedrick January 21, 2014 at 23:47

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?
- Jack January 23, 2014 at 15:57
  
  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.
M. January 22, 2014 at 10:42

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

Thanks.
- Jake Cobley February 19, 2014 at 21:03
  
  You can use this on wordpress. It took me a couple of hours but you need to adjust the wordpress nav structure very slightly.
- Bensita February 21, 2014 at 04:09
  
  Did you find a way to use this with WordPress? If so, can you share with us? Regards
Koray January 25, 2014 at 21:01

Hi Mary

I use your MULTI-LEVEL PUSH MENU I clicked your menu item but it doesnt work. How can I work click item ?
Jack February 2, 2014 at 17:20

I think it’s safe to say there is no support from the team at tympanus for this menu anymore 🙁
kiran February 11, 2014 at 12:36

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..
daniel López February 12, 2014 at 22:20

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();
- Valeria May 30, 2014 at 19:55
  
  Thank you very much Daniel. I needed this today and you saved me.
- Valeria May 30, 2014 at 20:52
  
  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();
Jake Cobley February 18, 2014 at 16:26

Thanks for this, I’ve coded it into a wordpress menu now and working well 🙂
- Bensita February 21, 2014 at 04:13
  
  How can I use this with wordpress? Can you help me? Regards
Miguel February 18, 2014 at 22:23

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
- Jonathan March 12, 2014 at 13:15
  
  I can’t make it work 🙁 could you please paste your code? It would be very appreciated…
Paolo Sax February 20, 2014 at 11:54

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
judia February 25, 2014 at 05:43

Can you integrate this with wordpress?????
J. Sanchez February 26, 2014 at 22:33

I would love to see successful implementations of the menu— share your work/websites.
Sebastian February 27, 2014 at 17:39

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.
implum March 12, 2014 at 16:38

Does not work on iphone 5s :/
Rajan March 15, 2014 at 15:04

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..
Taslimuddin March 19, 2014 at 07:59

why Single link a href not working????
Ivo March 21, 2014 at 18:07

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.
judia March 22, 2014 at 04:26

Can this be integrated into WordPress?
- Paul May 13, 2014 at 00:16
  
  You’d have to use the walker method for implementing menus if you wanted this to use WordPress menus (see Codex – Creting Custom Walker Function)
John Fletcher March 22, 2014 at 18:20

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?
Marina March 25, 2014 at 15:17

how do I open the menu when mousing
Ivo March 27, 2014 at 12:05

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.
Sam S April 3, 2014 at 06:23

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
Fidel Castro April 3, 2014 at 09:55

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?
Michael McLaughlin April 5, 2014 at 02:06

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.
- Yazeed Al Oyoun April 7, 2014 at 22:14
  
  I’m also looking for a solution to do this.
Adrian C Black April 6, 2014 at 17:18

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!
- Fidel Castro April 7, 2014 at 12:26
  
  I fixed the scroll issue.. if like i will share the code man. tweet me click to tweet.
- Aleksey April 7, 2014 at 19:58
  
  btw, for menu scrollling:
  
  In css/component.css
  add
  
  overflow-y: scroll;
  
  into .st-menu
Fidel Castro April 7, 2014 at 12:30

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”
Aleksey April 7, 2014 at 19:49

Sry for newbie question…
How I can close menu if I set menu width: 100% ?
- Aleksey April 8, 2014 at 10:01
  
  I found the solution:
  
  add new function:
  
  function closeMe(){ var container = document.getElementById( 'st-container' ); classie.remove( container, 'st-menu-open' ); };
  
  the call it in menu
  
  <li><a class="icon icon-star" href="#" onclick="closeMe();">Exit1</a></li> 
atodd April 7, 2014 at 22:15

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?
Umit April 10, 2014 at 13:23

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' ) ); });
Fidel Castro April 16, 2014 at 07:21

how to adjust the width of the menu?
Fidel Castro April 19, 2014 at 07:46

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
- Jay January 6, 2015 at 23:41
  
  I have this same problem on landscape in mobile – I cannot scroll all the way to the bottom of the dropdown list.
Fidel Castro April 21, 2014 at 11:51

Problem while with levels while having huge data along with the scroll…
Gianlu May 6, 2014 at 22:51

I found a bug. I have no clues how to fix it.
Only on Firefox ( i havent tested IE)
if you have a fixed element inside the mp-pusher (e.g. try to add a position:fixed to the codrop top bar ).
this fixed element will disappear once you click on the trigger.
Do you have any idea how to solve it?
cheers
McAsh May 8, 2014 at 23:59

Love this. I would just very much see a version that does not depend on 3d transforms so it can be used in older browsers too. I know there has been made a jQuery plugin about Mary’s lovely menu (https://github.com/adgsm/multi-level-push-menu) which works in IE8. However, I would like to use 3d transforms in browsers that supports it and as a fallback I’d use the jQuery plugin. Unfortunately it’s not the exact same markup structure in the jQuery plugin which makes it difficult to use both Mary’s menu and the jQuery plugin. Has anyone got any experience with fallbacks to IE8+ using the one with 3d transforms and the jQuery plugin?

Thanks in advance.
/Aske
Chris May 13, 2014 at 19:02

Has anyone been able to get this menu working on Windows Phones?
- Matt June 11, 2014 at 16:27
  
  first change line 98 of mlpushmenu.js to:
  this.eventtype = ‘click’;
  
  (Windows phone IE doesn’t recognize ‘touchStart’)
  then in your css add:
  
  @-ms-viewport {
  width: auto;
  }
  
  This fixes scrolling.
- Iroq_P July 31, 2014 at 17:57
  
  The fix by Matt doesn’t work. If i modify the line 98, the menu never appear when i it the button…
Lauriel Mesquita May 20, 2014 at 18:05

I found a bug in iOS, if the page has a lot of content and is a very high page, when you touch the iOS bar to slide up to the top, it does not. Has anyone noticed this and have any solutions?
Will May 26, 2014 at 10:25

Hi, what if I have a lot of items in the list so I need a scroll function in menu? Thanks 🙂
- RoughRabbit June 6, 2014 at 23:08
  
  Yep, my issue too. My lazy workaround is just to create more levels- split the categories up more….
Roland Deschain May 27, 2014 at 23:55

Getting this: Uncaught TypeError: Cannot read property 'querySelectorAll' of null mlpushmenu.js:89
How can el be undefined?
- Thomas Reynolds June 5, 2015 at 02:10
  
  I am getting this same error if anybody can help.
Matt June 11, 2014 at 17:13

I have found this to be one of the best slider navs out there and I really appreciate all the work put in to this so thanks for sharing it! While using it I ran into a few bugs that I found solutions to so I want to share those with the community in case anyone else runs into them but haven’t found a solution here yet. I know, I probably should have read the previous comments first but here goes:

iOS scrolling issues.
fix:
I added these lines to my css
.scroller {
overflow-y: scroll;
}
.scroller {
-webkit-overflow-scrolling: touch;
}
.scroller > * {
-webkit-transform: translateZ(0px);
}
This gives smooth scrolling to iOS while also fixing those blank areas you get while scrolling where you have to wait until you stop scrolling for the content to display.

Windows Phone 8.0 clicking the button to open the nav didn’t work.
fix:
in mlpushmenu.js change line 98 from:
this.eventtype = mobilecheck() ? ‘touchstart’ : ‘click’;
to:
this.eventtype = ‘click’;
(that browser doesn’t recognize ‘touchstart’ as an event. )

Windows Phone 8.0 Scrolling didn’t work.
fix:
in my css I added these lines:
body, html, .scroller {
-ms-overflow-style: none !important;
}
@-ms-viewport {
width: auto;
}

remaining issues:
IE 9 and below: the plugin doesn’t seem to work but at that point I would call it ‘progressive enhancement’ or ‘graceful degradation’ (your pick) and switch to a more simple navigation solution for those browsers.

Hopefully this is helpful to someone.
- Su February 18, 2015 at 11:49
  
  Thanks for the very cool menu and
  @Matt thanks a lot for posting your fixes!
  Su
- Christopher October 20, 2015 at 22:36
  
  Thank you for the amazing plugin Mary Lou and your fixes Matt! Worked perfectly!
glupto July 6, 2014 at 15:20

Hi, there, try to work with this multilevelpushmenu, but got two Problems, what, if the list of menu-items is too long for a site on a screen or a smartphone, but you don’t want to have a scrollbar? And on my smartphone the menu-icon to open the menu-levels often does not react (only whe I touched several times…) Has anyone got an idea?

Thanks
glupto
Michael July 8, 2014 at 03:47

This is very nice, but there is one problem. Once there is the right push, the right area is not resized and any content that was previously close to the right edge vanishes.

I want it to resize automatically… is that possible?
Danilo July 18, 2014 at 16:50

Does anyone knows if the code was updated with the fixes? Or is it “bugged” since the beginning ?!
I’m asking this because i really liked!

Manoela Ilic

Surface Sampling in Three.js

Creating the Effect of Transparent Glass and Plastic in Three.js

Creating an Interactive 3D Bulge Text Effect with React Three Fiber

Stay in the loop: Get your dose of frontend twice a week

Feedback 261

Feedback ²⁶¹