Codrops重复的JavaScript多级按钮菜单 [英] Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU
问题描述
当谈到javascript时，有一点新手。
我的问题是关于来自codrops的推菜单脚本，可以在这里找到： http://tympanus.net/codrops/2013/08/13/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/
我试图有2个不同的导航由2个不同的链接/触发器触发。
我复制脚本如下：
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’
} );
，我复制了导航，并更改了id，具有带有mp-mennu2和触发器的导航如果是trigger2。
，但只有第二个触发器正在工作。如果我点击第一个触发器，它将打开mp-menu2。
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.
这是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>
推荐答案
您需要自定义脚本，以便知道哪个触发器清洗它。您可以通过引入调用者的id来改变该滚动内容的变换方向来实现。更改打开的菜单功能如下：
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);
最后，您必须通过设置一些这样的CSS（而且也反向）来对齐第二个menue菜单的变换方向）：
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);}
自从构造函数不再需要菜单参数，但它的作法是。您可以通过手机版本来查看： http://www.onlinegolf.co.uk/
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/
这篇关于Codrops重复的JavaScript多级按钮菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
