Question

我使用slicknav插件进行移动设备菜单，但遇到以下问题：菜单必须固定在顶部，但我的菜单相当长，对于较小的屏幕，无法浏览所有项目。我尝试将移动触发器（定位固定）与菜单本身相对分离，但这不起作用，以及在滚动上添加overflow-y和菜单包装器本身自动添加。任何人都可以帮我解决某些问题，或者遇到类似的插件？ 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

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

Answer 2

您可能最好修改插件本身的CSS。你能发一个例子jsfiddle吗？问题可能是固定的像素定义。我对移动设备不太熟悉，但肯定这是一个CSS的东西。

jQuery，slicknav插件，长菜单溢出y

2 个答案: