关于javascript的一点新手。 我的问题是关于来自codrops的推送菜单脚本，可以在这里找到：http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/
我试图通过2个不同的链接/触发器触发2个不同的导航。 我复制了脚本如下：
new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ), {
type : ‘cover’
} );
new mlPushMenu( document.getElementById( ‘mp-menu2′ ), document.getElementById( ‘trigger2′ ), {
type : ‘cover’
} );
并且我复制了导航并更改了id以使用带有id mp-mennu2的导航和带有if trigger2的触发器。 但只有第二个触发器正在工作。如果我点击第一个触发器，它会打开mp-menu2。
是否有人知道如何获得该结果。
这是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>
答案 0 :(得分：1)
您需要自定义脚本，以便知道触发了哪个触发器。您可以通过引入调用者的id并更改该卷轴内容的转换方向来实现。更改打开菜单功能如下：
_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 );
}
}
}
然后将函数调用（绑定事件侦听器时）更改为：
self._openMenu(null, this.id);
最后你必须通过设置这样的css来对齐第二个menue（并且还反转菜单的转换方向）：
#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);}
由于构造函数不再需要菜单参数，所以有点hacky，但它可以解决问题。您可以在此版本的移动版本中查看此内容：http://www.onlinegolf.co.uk/
答案 1 :(得分：0)
我找不到你的小提琴中带有id =“mp-menu2”的nav元素，但是即使添加它也没有任何区别......
也许您可以尝试使用Multi-Level Push Menu jQuery plug-in。
答案 2 :(得分：0)
我希望你已经得到了这个，如果不是我发现的： 菜单按照你的方式工作，但由于它们共享'mp-menu'类，两者都有相同的z-index和相同的坐标，所以我只是把这个小技巧添加到你的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);
});
没有太多时间所以我只是使用了jquery，抱歉，cya
答案 3 :(得分：0)
我使用的david.mager提供的部分解决方案的替代方法是代替CSS代码，将其添加到开头：
_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";
}
这对我有用，因为我有两个菜单来自屏幕的左侧。