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-pu

Solution 1:

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/

Solution 2:

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.

Solution 3:

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

Solution 4:

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.