0

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

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

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

响应式导航菜单图

这个插件被设置为在触发时在汉堡菜单图标旁边显示文本——在这种情况下它是“菜单”——但我不想显示任何文本，只是让“徽标”标题保持浮动在左边。我怀疑问题在于浮动标题和导航元素，也许它们需要定位在容器内并对列表项进行针对媒体查询的调整（？），但我在这方面的尝试没有奏效。

感谢您在这里提供的任何帮助。我很乐意为任何找到解决方案的人买咖啡:)

4

1 回答 1

1

It looks like you can specify what the label text is in the slimMenu options. Set it to this:

$('ul.slimmenu').slimmenu(
{
    resizeWidth: '600',
    collapserTitle: '',
    easingEffect:'easeInOutQuint',
    animSpeed:'medium',
    indentChildren: true,
    childrenIndenter: '»'
});

and it should give you what you're looking for.

Edit: And to address the 100% width that I neglected in the original answer you could do this:

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

where the max-width is set to the same width as the 'resizeWidth' option in slimMenu.

Also, it would probably benefit you to apply a class or ID to both the nav and h1 elements to make sure you're not hitting all of your h1s with that media query.

于 2013-09-28T12:45:57.400 回答