Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU

Question

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>

Answer 1

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

Answer 2

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.

Answer 3

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/

Answer 4

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.