blocks|key|1687241|text|你最好修改插件本身的css。你能发布一个jsfiddle示例吗？问题可能是修复了像素定义。我对移动设备不是很熟悉，但可以肯定的是它是一个CSS的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1687242|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You might be better off modifying the css of the plugin itself. Can you post an example jsfiddle? Issue could be fixed pixel definitions. I'm not too familiar with mobile but for sure it's a CSS thing.

blocks|key|1699930|text|我知道这个问题已经发布很长时间了，但我遇到了同样的问题，所以我将在这里发布我的解决方案。当你初始化slicknav菜单时，你应该添加相应的回调函数来切换某个类到一个处于打开状态的容器，最好是在body上。这样，如果您有可能样式打开的状态，并添加一个小的css，使它隐藏滚动条在小高度屏幕。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1699931|下面是初始化slicknav的方法：|1699932|var+$container+=+$('body');+$('#menu2').slicknav({+++++duplicate:false,+//adjust+if+you+have+an+un-responsive+menu+to+begin+with+++++label:+'Menu',+++++beforeOpen:+function(e)+{|offset|length|style|CODE|1699933|+++++`if(e.hasClass('slicknav_btn')){+++++++++$container.addClass('slicknav_open');+++++++++}+++++},+++++beforeClose:+function(e)+{+++++++++if(e.hasClass('slicknav_btn')){+++++++++$container.removeClass('slicknav_open');+++++++++}+++++}++});`|code-block|syntax|javascript|1699934|然后是css(将其放入@media查询中)：|1699935|html,body{
++++height:100%25;
++++margin:0
}

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

}
#menu2{
+height:+auto;+++
}|1699936|这里有一个演示小提琴：http://jsfiddle.net/9vvanrj2/|1699937|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/9vvanrj2/^0|0|0|0|4X|0|0|0|0|B|T|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@$F|15|G|16|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1A|8|@]|9|@$F|1B|G|1C|1|1D]]|A|$]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

I know its a long time since the issue posted, but I encountered the same problem, so I'll post here my solution. When you init the slicknav menu you should add respective callbacks to toggle a certain class to a container on its open state, better on body. This way if you have a possibility to style the opened state and add a little css to make it hide the scroll-bar on small heights screens.

Here's how you init the slicknav:

<code>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');
 }
 } 
});</code>

and then the css(put this in your @media query):

<pre><code>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; 
}
</code></pre>

Here's a fiddle for demo: <a href="http://jsfiddle.net/9vvanrj2/" rel="nofollow">http://jsfiddle.net/9vvanrj2/</a>

Im using the slicknav plugin for my mobile menu, but encounter the following problem:
the menu has to be fixed on top, but my menu is rather long and for smaller screens it is impossible to navigate through all of the items.
I tried separating the mobile trigger (positioning fixed) and the menu itself relative, but that doesn't work, as well as adding overflow-y on scroll and auto for the menu wrapper itself.
Anyone can help me with some sort of solution or has encountered similar with this plugin?
html:

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

js:

<pre><code>$('#menu2').slicknav({prependTo:'#mobileMenuHolder'});
</code></pre>

css: (not working)

<pre><code>#mobileMenuHolder, .slicknav_menu{
 overflow-y: scroll;
 position: relative;
}
</code></pre>

mobileMenuHolder holds the menu and is at the bottom of the fixed div.

Thanks for all help provided.

<a href="http://jsfiddle.net/asturias/L6k9zz6n/" rel="nofollow">jsfiddle</a>

jQuery, slicknav plugin, long menu overflow y

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在为我的手机菜单使用slicknav插件，但遇到了以下问题:菜单必须固定在顶部，但我的菜单相当长，对于较小的屏幕，不可能浏览所有的项目。我尝试分离移动触发器(定位固定)和菜单本身的相对位置，但这不起作用，并且在滚动和菜单包装本身上添加overflow-y和auto。任何人可以帮助我与某种解决方案或遇到类似的这个插件...

问jQuery，slicknav插件，长菜单溢出
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery，slicknav插件，长菜单溢出EN