Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU
Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU
在javascript方面有点新手。我的问题是关于codrops的推送菜单脚本，可以在这里找到：http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/
我正在尝试由2个不同的链接/触发器触发两个不同的导航。我复制了如下脚本：
new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ), {
type : ‘cover’
} );
new mlPushMenu( document.getElementById( ‘mp-menu2′ ), document.getElementById( ‘trigger2′ ), {
type : ‘cover’
} );
我复制了nav，并将id更改为具有id为mp-menu2的nav和具有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>
您需要自定义脚本，以便它知道击中了哪个触发器。您可以通过引入调用方的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将第二个菜单向右对齐（并反转菜单的转换方向）：
#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/
我在你的小提琴里找不到id为"mp-menu2"的nav元素，但即使添加它也没有任何区别。。。
也许您可以尝试使用多级推送菜单jQuery插件。
我希望你已经得到了这个，如果不是的话，这就是我发现的：菜单的工作方式与您的相同，但由于它们共享"mp菜单"类，所以它们都有相同的z索引和坐标，所以我只是在您的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
我使用的david.mager提供的部分解决方案的替代方案不是CSS代码，而是将其添加到的开头
_openMenu：函数（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";
}
这对我很有效，因为我的两个菜单都来自屏幕左侧。
相关文章：
- NodeJS API调用中Array中的Push和Pull元素
- menu.asp javascript
- Push方法显示错误
- Array.push导致程序出错
- Firebase“;未捕获的类型错误:myDataRef.push不是函数;
- $$hashKey在Angular中push(）新对象时未生成新值
- 带array.push(）的双方括号---JavaScript
- 使用$http的angular js中的JSON数据-data.push(）
- 为什么push方法没有'在这种情况下不起作用:[].推
- Flexbox导致adsense错误:;adsbygoogle.push(）错误:没有可用宽度为0的插槽大小;
- 为什么这个 .push 不起作用?(JavaScript）
- 检测未绑定的本机函数，如“Array.push”
- Javascript:如何对属性变量(例如var.hello.push）执行数组方法?太习惯AS3了
- 向 Firebase “push” 方法添加时间戳
- TypeError: matrix[y].push 在尝试使用 javascript 创建 2D 数组时不是一个函数
- dataLayer.push(） 返回值含义
- Javascript:push 不是数组的函数
- JavaScript:为什么 array.push(） 附加两个对象而不是一个对象
- Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU
- 尝试从实现多级推送菜单http://multi-level-push-menu.make.rs在网站上
