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’
} );

そして私はnavを複製し、idを変更して、id mp-mennu2のnavとif trigger2のトリガーを持つようにしました。しかし、2番目のトリガーのみが機能しています。最初のトリガーをクリックすると、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

どのトリガーがヒットしたかを認識できるように、スクリプトをカスタマイズする必要があります。これは、呼び出し元の 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 を設定して、2 番目のメニューを右に揃える必要があります (また、メニューの変換方向を逆にします)。

#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/

于 2014-11-05T08:26:48.810 に答える
0

フィドルで id="mp-menu2" を含む nav 要素が見つかりませんでしたが、追加しても違いはありませんでした...

代わりにMulti-Level Push Menu jQuery プラグインを使用してみてください。

于 2013-11-18T14:16:51.117 に答える
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

私が使用したdavid.magerによって提示されたソリューションの一部に代わるものは、CSSコードの代わりに、これを最初に追加することでした:

_openMenu : function( サブレベル, 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";
        }

画面の左側から両方のメニューが表示されるので、これはうまくいきました。

于 2015-03-19T20:58:06.290 に答える