设计可折叠的响应式导航栏
尼克
我一直在定制一个名为slimMenu的响应式导航jQuery插件时遇到一些困难。我在这里设置了jsFiddle 。最终，我想创建一个响应性标题，其中h1“徽标”浮动在容器的左侧（即标题），而导航链接则浮动在右侧。触发折叠菜单后-在这里我在插件初始化中设置了一个600px的断点：
$('ul.slimmenu').slimmenu({
resizeWidth: '600'
});
您可以通过更改jsFiddle中“结果”窗格的宽度来看到它-我希望下拉列表项以100％的宽度填充视口，如下图所示：
该插件设置为在触发时在汉堡菜单图标旁边显示文本（在本例中为“菜单”），但我希望不显示任何文本，而仅将“ Logo”标头永久浮动在左侧。我怀疑问题出在浮动header＆nav元素，也许它们需要放置在容器中并对列表项（？）进行以媒体查询为目标的调整，但是我的尝试没有奏效。
感谢您的协助。我很乐意为找到解决方案的任何人买一杯咖啡:)
罗韦茅斯
看起来您可以在slimMenu选项中指定标签文本。设置为此：
$('ul.slimmenu').slimmenu(
{
resizeWidth: '600',
collapserTitle: '',
easingEffect:'easeInOutQuint',
animSpeed:'medium',
indentChildren: true,
childrenIndenter: '»'
});
它应该给您您想要的东西。
编辑：要解决我在原始答案中忽略的100％宽度，您可以执行以下操作：
@media screen and (max-width: 600px) {
nav {
width:100%;
}
h1 {
position: absolute;
z-index: 100;
}
}
其中max-width设置为与slimMenu中的'resizeWidth'选项相同的宽度。
同样，将一个类或ID应用于nav和h1元素以确保您不会通过该媒体查询找到所有的h1可能也会使您受益。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
响应式设计导航菜单
- 2
引导式导航与可折叠搜索
- 3
AngularStrap响应式导航栏折叠动画
- 4
Bootstrap 4响应式导航栏在xs宽度处折叠？
- 5
Bootstrap 4中的堆叠式可折叠导航栏
- 6
语义UI：具有响应内容的可折叠侧边栏
- 7
响应式导航栏问题
- 8
可折叠的侧边栏/导航菜单
- 9
中心响应式导航栏
- 10
引导导航栏在试图使其可折叠时出现故障
- 11
在angular 7上折叠响应式导航栏
- 12
响应式可折叠表一次：
- 13
引导程序3-> 5导航栏可折叠
- 14
Bootstrap折叠响应式导航栏高度
- 15
缩放导航栏-响应式设计
- 16
CSS：流畅的布局，可扩展为可折叠的导航栏
- 17
响应式设计导航菜单
- 18
引导程序可折叠导航栏开始打开
- 19
响应式导航栏问题
- 20
响应式Superfish导航栏
- 21
引导程序：可折叠的导航栏不起作用
- 22
Bootstrap可折叠的导航栏未显示
- 23
我的bootstrap 3响应式导航栏不会折叠。
- 24
可折叠式引导导航栏
- 25
使可折叠的导航菜单响应Bootstrap导航药丸
- 26
可折叠导航栏不起作用
- 27
我的可折叠导航栏有什么问题？
- 28
修复响应式导航栏
- 29
使可折叠导航栏在 Internet Explorer 中工作的问题
我来说两句