1

我将 slicknav 插件用于我的移动菜单，但遇到以下问题：菜单必须固定在顶部，但我的菜单相当长，对于较小的屏幕，无法浏览所有项目。我尝试将移动触发器（定位固定）和菜单本身相对分开，但这不起作用，以及为菜单包装器本身添加滚动和自动溢出-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

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 回答
0

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

于 2015-05-26T10:44:58.020 回答