jQuery，slicknav插件，长菜单溢出
我正在为我的手机菜单使用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
回答 2
Stack Overflow用户
发布于 2015-09-26 07:14:05
我知道这个问题已经发布很长时间了，但我遇到了同样的问题，所以我将在这里发布我的解决方案。当你初始化slicknav菜单时，你应该添加相应的回调函数来切换某个类到一个处于打开状态的容器，最好是在body上。这样，如果您有可能样式打开的状态，并添加一个小的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/
Stack Overflow用户
发布于 2015-05-26 18:44:58
你最好修改插件本身的css。你能发布一个jsfiddle示例吗？问题可能是修复了像素定义。我对移动设备不是很熟悉，但可以肯定的是它是一个CSS的东西。
https://stackoverflow.com/questions/30449084
复制相似问题
腾讯云开发者
