jquery - 设计可折叠的响应式导航栏

自定义名为slimMenu的响应式导航jQuery插件时，遇到了一些困难。我已经设置了jsFiddle here。最终，我想创建一个响应性标题，其中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: '&raquo;'
});

它应该给您您想要的东西。

编辑：
为了解决我在原始答案中忽略的100％宽度，您可以执行以下操作：

@media screen and (max-width: 600px) {
    nav {
        width:100%;
    }
    h1 {
        position: absolute;
        z-index: 100;
    }
}

其中max-width设置为与slimMenu中的'resizeWidth'选项相同的宽度。

同样，将类或ID应用于nav和h1元素以确保您不会通过该媒体查询找到所有的h1可能也会使您受益。