Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU
Few newbies when it comes to javascript. My question is about the push-menu script from codrops which can be found here: http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/
I am trying to have 2 different navs triggered by 2 different links / triggers. I have duplicated the script like this:
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 navigation and changed the id to have a navigation with id mp-mennu2 and a trigger with if trigger2. but only the second trigger works. If I click on the first trigger it opens mp-menu2.
Does anyone have any idea on how to get this 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 Clothing</a>
<div class="mp-level">
<h2 class="icon icon-female">Women 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 Clothing</a>
<div class="mp-level">
<h2 class="icon icon-male">Men 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>
source to share
You need to tweak your script so that it knows which trigger was hit. You can achieve this by entering the caller ID and changing the direction of transforming the scroller's content for that. Change the function of the open menu 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):
self._openMenu(null, this.id);
Finally, you have to align the second menu to the right by setting some css like this (and also change the transformation 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);}
This is a bit hacky as the constructor no longer needs the menu option, but it does the trick. You can check it out on the mobile version of this: http://www.onlinegolf.co.uk/
source to share
I couldn't find a nav element with id = "mp-menu2" in your fiddle, but even adding it didn't make any difference ...
Perhaps you could use the jQuery multi-level Push Menu plugin instead .
source to share
I hope you already have this, if this is not what I found: the menus worked the way you did, but since they share the "mp-menu" class, both have 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);
});
not much time consuming so i just used jquery sorry cya
source to share
An alternative to the part of the solution provided by david.mager I used instead of CSS code to add this to the top:
_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 a menu exiting from the left side of the screen.
source to share