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

Question

我在定制一个名为slimMenu的响应式导航jQuery插件时遇到了一些困难。我已经设置了一个jsFiddle here。最后，我想创建一个响应式标题，其中h1“徽标”浮动到容器的左侧（即标题），导航链接浮动到右侧。在触发折叠菜单时 - 这里我在插件初始化中设置了一个600px的断点：

$('ul.slimmenu').slimmenu({
    resizeWidth: '600'
});

您可以通过更改jsFiddle中“结果”窗格的宽度来查看 - 我希望下拉列表项以100％宽度填充视口，如我在此图中所示：

此插件设置为在触发时显示汉堡包菜单图标旁边的文字 - 在这种情况下是“菜单” - 但我不希望显示任何文字，只是让“徽标”标题保持浮动状态剩下。我怀疑问题在于浮动标题和放大器。 nav元素，也许它们需要放在一个容器中，并对列表项进行以媒体查询为目标的调整（？），但我的这种尝试并没有起作用。

感谢您的帮助。我很乐意为找到解决方案的人买咖啡给任何人：）

Answer 1

看起来您可以指定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。