Повторяющийся JavaScript для Codrops МНОГОУРОВНЕВОЕ НАЖИМНОЕ МЕНЮ
Немного новичка, когда дело доходит до JavaScript. Мой вопрос касается скрипта push-меню из 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’
} );
и я дублировал навигацию и изменил идентификатор, чтобы иметь навигацию с идентификатором mp-mennu2 и триггером с помощью триггера if. но работает только второй триггер. Если я нажимаю на первый триггер, он открывает 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>
4 ответа
Вам нужно настроить скрипт так, чтобы он знал, какой триггер был нажат. Вы можете добиться этого, введя идентификатор вызывающего абонента и изменив направление преобразования содержимого скроллера для этого. Измените функцию открытого меню следующим образом:
_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/
Я не смог найти элемент nav с id="mp-menu2" в вашей скрипке, но, тем не менее, даже добавление этого не имело никакого значения...
Может быть, вы могли бы попробовать вместо этого использовать плагин Multi-Level Push Menu jQuery.
Альтернативой части решения, представленного 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";
}
Это сработало для меня, так как у меня есть оба меню с левой стороны экрана.
Я надеюсь, что вы уже получили это, если не это то, что я обнаружил: меню работали так, как у вас, но так как они разделяют класс 'mp-menu', оба имели одинаковый 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