Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU

A bit of a newbie when it comes to javascript. My question is regarding a push-menu script from codrops that can be find here: http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/

I am trying to have 2 different nav triggered by 2 different link/triggers. 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 opens mp-menu2.

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

Here is the html

<div class="container"> <!-- Push Wrapper --> <div class="mp-pusher" id="mp-pusher"> <!-- 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> <a class="mp-back" href="#">back</a> <ul> <li class="icon icon-arrow-left"> <a class="icon icon-phone" href="#">Mobile Phones</a> <div class="mp-level"> <h2>Mobile Phones</h2> <a class="mp-back" href="#">back</a> <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"> <a class="icon icon-tv" href="#">Televisions</a> <div class="mp-level"> <h2>Televisions</h2> <a class="mp-back" href="#">back</a> <ul> <li><a href="#">Flat Superscreen</a></li> <li><a href="#">Gigantic LED</a></li> <li><a href="#">Power Eater</a></li> <li><a href="#">3D Experience</a></li> <li><a href="#">Classic Comfort</a></li> </ul> </div> </li> <li class="icon icon-arrow-left"> <a class="icon icon-camera" href="#">Cameras</a> <div class="mp-level"> <h2>Cameras</h2> <a class="mp-back" href="#">back</a> <ul> <li><a href="#">Smart Shot</a></li> <li><a href="#">Power Shooter</a></li> <li><a href="#">Easy Photo Maker</a></li> <li><a href="#">Super Pixel</a></li> </ul> </div> </li> </ul> </div> </li> <li class="icon icon-arrow-left"> <a class="icon icon-news" href="#">Magazines</a> <div class="mp-level"> <h2 class="icon icon-news">Magazines</h2> <a class="mp-back" href="#">back</a> <ul> <li><a href="#">National Geographic</a></li> <li><a href="#">Scientific American</a></li> <li><a href="#">The Spectator</a></li> <li><a href="#">The Rambler</a></li> <li><a href="#">Physics World</a></li> <li><a href="#">The New Scientist</a></li> </ul> </div> </li> <li class="icon icon-arrow-left"> <a class="icon icon-shop" href="#">Store</a> <div class="mp-level"> <h2 class="icon icon-shop">Store</h2> <a class="mp-back" href="#">back</a> <ul> <li class="icon icon-arrow-left"> <a class="icon icon-t-shirt" href="#">Clothes</a> <div class="mp-level"> <h2 class="icon icon-t-shirt">Clothes</h2> <a class="mp-back" href="#">back</a> <ul> <li class="icon icon-arrow-left"> <a class="icon icon-female" href="#">Women's Clothing</a> <div class="mp-level"> <h2 class="icon icon-female">Women's Clothing</h2> <a class="mp-back" href="#">back</a> <ul> <li><a href="#">Tops</a></li> <li><a href="#">Dresses</a></li> <li><a href="#">Trousers</a></li> <li><a href="#">Shoes</a></li> <li><a href="#">Sale</a></li> </ul> </div> </li> <li class="icon icon-arrow-left"> <a class="icon icon-male" href="#">Men's Clothing</a> <div class="mp-level"> <h2 class="icon icon-male">Men's Clothing</h2> <a class="mp-back" href="#">back</a> <ul> <li><a href="#">Shirts</a></li> <li><a href="#">Trousers</a></li> <li><a href="#">Shoes</a></li> <li><a href="#">Sale</a></li> </ul> </div> </li> </ul> </div> </li> <li> <a class="icon icon-diamond" href="#">Jewelry</a> </li> <li> <a class="icon icon-music" href="#">Music</a> </li> <li> <a class="icon icon-food" href="#">Grocery</a> </li> </ul> </div> </li> <li><a class="icon icon-photo" href="#">Collections</a></li> <li><a class="icon icon-wallet" href="#">Credits</a></li> </ul> </div> </nav> <!-- /mp-menu --> <div id="mp-menu2" class="mp-menu"> <div class="mp-level"> <h2 class="icon icon-world">language chooser</h2> <ul> <li><a class="icon icon-display" href="#">Français</a></li> <li><a class="icon icon-tv" href="#">English</a></li> </ul> </div> </div> <div class="scroller"><!-- this is for emulating position fixed of the nav --> <div class="scroller-inner"> <header class="codrops-header"> <h1>Multi-Level Push Menu <span>Off-screen navigation with multiple levels</span></h1> </header> <div class="content clearfix"> <div class="block block-40 clearfix"> <p><a href="#" id="trigger" class="menu-trigger">Open/Close Menu</a></p> <p><a href="#" id="trigger2" class="menu-trigger">Open/Close Menu</a></p> </div><!-- /scroller-inner --> </div><!-- /scroller --> </div><!-- /pusher --> </div><!-- /container --> <script src="js/classie.js"></script> <script src="js/mlpushmenu.js"></script> <script> new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), { type : 'cover' } ); new mlPushMenu( document.getElementById( 'mp-menu2' ), document.getElementById( 'trigger2' ), { type : 'cover' } ); </script>


You need to customize the script so it knows which trigger was hit. You can achieve that by bringing in the id of the caller and change the transform direction of the scroller content for that one. Alter the open menu function as follows:

_openMenu : function( subLevel, id ) { // increment level depth ++this.level; // move the main wrapper var levelFactor = ( this.level - 1 ) * this.options.levelSpacing, translateVal = this.options.type === 'overlap' ? this.el.offsetWidth + levelFactor : this.el.offsetWidth; if (id === 'trigger2') { translateVal = -1 * translateVal; } this._setTransform( 'translate3d(' + translateVal + 'px,0,0)' ); if( subLevel ) { // reset transform for sublevel this._setTransform( '', subLevel ); // need to reset the translate value for the level menus that have the same level depth and are not open for( var i = 0, len = this.levels.length; i < len; ++i ) { var levelEl = this.levels[i]; if( levelEl != subLevel && !classie.has( levelEl, 'mp-level-open' ) ) { var wrapperShift = (id === 'trigger2') ? (1 * levelFactor) : (-1 * levelFactor); this._setTransform( 'translate3d(' + ((id === 'trigger2') ? '100' : '-100') + '%,0,0) translate3d(' + wrapperShift + 'px,0,0)', levelEl ); } } }

Then change the function call (when the event listener is bound) to:

self._openMenu(null, this.id);

Finally you have to align the second menue to the right by setting some css like this (and also reverse the transform direction for the menu):

#mp-menu-1 {position:absolute; top:0; left:0; z-index:9999; width:233px; background:#fff; border-right:1px solid #ccc; height:100%; transform:translate3d(-100%, 0px, 0px);} #mp-menu-2 {position:absolute; top:0; right:0; z-index:9999; width:233px; background:#fff; border-right:1px solid #ccc; height:100%; transform:translate3d(100%, 0px, 0px);}

It is a little bit hacky since the constructor doesn't need the menu parameter anymore, but it does the trick. You can check this out at the mobile version of this one: http://www.onlinegolf.co.uk/


I could not find nav element with id="mp-menu2" in your fiddle, but however even adding it didn't make any difference...

Maybe you could try using Multi-Level Push Menu jQuery plug-in instead.


I hope you already got this if not this is what I found: the menus were working the way you had them, but since they share the 'mp-menu' class, both had the same z-index and the same coordinates, so I just added this little trick to your js:

$('#trigger').bind('click', function () { $('#mp-menu').css('z-index', 10); $('#mp-menu2').css('z-index', 1); }); $('#trigger2').bind('click', function () { $('#mp-menu2').css('z-index', 10); $('#mp-menu').css('z-index', 1); });

didn't had much time so I just used jquery, sorry about that, cya


An alternative to part of the solution presented by david.mager I used was instead of the CSS code, to add this to the start of:

_openMenu : function( subLevel, id ) {

if (id == 'trigger') { document.getElementById("mp-menu-two").style.zIndex = "1"; document.getElementById('mp-menu-one').style.zIndex = "99"; } else { document.getElementById('mp-menu-one').style.zIndex = "1"; document.getElementById("mp-menu-two").style.zIndex = "99"; }

This worked for me as I have both menu's coming from the left side of the screen.


  • Searching column with string for wildcard match
  • SCNMaterial: can't find init:mdlMaterial:
  • Sony, Camera API, stack overflow, QX100, feature requests, responses,
  • urllib.unquote not properly decoding url [duplicate]
  • RDLC - “String Not Recognized As A Valid DateTime” Error
  • ZF2 validating date and time format PT_BR always The input does not appear to be a valid date
  • Obtaining Hispanic Population % from Google Maps Demographics Layer
  • Extracting an href's text from an html document
  • How do I modify this page peel effect without messing it up?
  • Clean way to build long strings in Ruby
  • Date Formatting in php for string with AM and PM
  • Simulate an optically-inverted (mirror-image) camera in Three.js
  • C++ map really slow?
  • iTextSharp - Copying elements from one PDF to another
  • Storing large decimal numbers in Java
  • How can i find the length of this Json object
  • How do I convert an SQL date result to British format (dd/mm/yyyy)
  • Centering a texture LibGDX
  • Retina 4 2x is never used for iPhone 5 simulator in Xcode 6.2 image asset
  • strptime in Javascript
  • Unable to change camera position when using VRControls
  • Substitute partial line in vim using only substitute command
  • Unable to scan Code 128
  • OpenCV OpenNI calibrate kinect
  • Valums Ajax file Upload handle the up. file?
  • Trying to total columns for relation datasource
  • Argument 5: cannot convert from 'System.Drawing.Image' to 'string' - calling cla
  • Best way to produce 'colour correct' raster from a PDF or PS with ghostscript
  • Best win32 compiled scripting language? [closed]
  • Phonegap GA plugin not working
  • Galaxy S4 Android Custom Camera Issue
  • Save image as is in photo album using swift
  • Reading space separated values file in c++ error
  • Android changing fragment order inside FragmentPagerAdapter
  • Jquery popup on mouse over of calendar control
  • How do I get HTML corresponding to current DOM tree?
  • Converting a WriteableBitmap image ToArray in UWP
  • How to render a blob on a canvas element?
  • How to define and use opencv mat of user type
  • How to create a file in java without a extension