1

モバイル メニューに slicknav プラグインを使用していますが、次の問題が発生します。メニューを上部に固定する必要がありますが、メニューがかなり長く、小さい画面ではすべての項目をナビゲートすることができません。モバイルトリガー（位置固定）とメニュー自体を相対的に分離しようとしましたが、それは機能しません。また、スクロールにoverflow-yを追加し、メニューラッパー自体にautoを追加しました。誰でも何らかの解決策で私を助けることができますか、またはこのプラグインで同様に遭遇しましたか? html:

<ul id="menu2">
    <li>Parent 1
        <ul>
            <li><a href="#">item 3</a></li>
            <li>Parent 3
                <ul>
                    <li><a href="#">item 8</a></li>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
        </ul>
    </li>
    <li><a href="#">item 1</a></li>
    <li>non-link item</li>
    <li>Parent 2
        <ul>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
        </ul>
    </li>
</ul>

js:

$('#menu2').slicknav({prependTo:'#mobileMenuHolder'});

css: (動かない)

#mobileMenuHolder, .slicknav_menu{
  overflow-y: scroll;
  position: relative;
}

mobileMenuHolder はメニューを保持し、固定 div の下部にあります。

提供されたすべてのヘルプに感謝します。

jsfiddle

4

2 に答える 2

1

問題が投稿されてから長い時間が経っていることは知っていますが、同じ問題が発生したため、ここに私の解決策を投稿します。slicknav メニューを初期化するときは、それぞれのコールバックを追加して、特定のクラスを開いている状態のコンテナーに切り替える必要があります。このようにして、開いた状態のスタイルを設定し、小さな css を追加して、小さな高さの画面でスクロールバーを非表示にする可能性がある場合。

slicknav の初期化方法は次のとおりです。

var $container = $('body'); $('#menu2').slicknav({ duplicate:false, //adjust if you have an un-responsive menu to begin with label: 'Menu', beforeOpen: function(e) {
if(e.hasClass('slicknav_btn')){ $container.addClass('slicknav_open'); } }, beforeClose: function(e) { if(e.hasClass('slicknav_btn')){ $container.removeClass('slicknav_open'); } } });

そしてcss（これを@mediaクエリに入れてください）：

html,body{
    height:100%;
    margin:0
}

.slicknav_open .slicknav_menu {
    height: 100%;
    overflow-y: scroll;
    width: calc(100% + 22px);
    margin-right: -22px;
    position:fixed;
    top:0;
    left:0;

}
#menu2{
 height: auto;   
}

デモ用のフィドルは次のとおりです。http://jsfiddle.net/9vvanrj2/

于 2015-09-25T23:14:05.473 に答える