2

说到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>
4

4 回答 4

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/

于 2014-11-05T08:26:48.810 回答
0

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.

于 2015-03-19T20:58:06.290 回答
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

于 2013-12-06T18:40:04.697 回答
0

我在你的小提琴中找不到 id="mp-menu2" 的导航元素，但是即使添加它也没有任何区别......

也许您可以尝试使用Multi-Level Push Menu jQuery 插件。

于 2013-11-18T14:16:51.117 回答