设计一个可折叠的响应导航栏

我已经有一些困难，定制响应导航的jQuery插件称为slimMenu。我已经成立了一个jsFiddle here。最终，我想创建一个响应头，其中h1“徽标”浮动到容器的左侧（即标头），并且导航链接浮动到右侧。在触发崩溃menu--这里我给自己定的600px的断点在插件初始化：设计一个可折叠的响应导航栏

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

您可以通过改变jsFiddle--的“结果”窗格的宽度，我想看看下拉列表项，填补100％的宽度视口，因为我在这个图中所示过：

responsive nav menu diagram

这个插件被设置为毗邻汉堡菜单图标显示的文本在这种情况下triggered--时它是“菜单” - 但我不想显示任何文本，只需在左侧悬浮“标识”标题即可。我怀疑问题在于浮动标题&导航元素，也许他们需要被放置在一个容器内，并对列表项目（？）进行媒体查询定位调整，但我在这方面的尝试没有奏效。

感谢您的任何帮助。我会很乐意买任何咖啡的人谁找到一个解决方案:)

来源

2013-09-28 nickpish

看起来你可以指定标签文本是在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; 
    } 
}

其中最大宽度设置为相同的宽度为“resizeWidth”选项在slimMenu。

而且，它可能有利于你对类或ID同时适用于导航和H1元素，以确保没有用完所有的H1S与该媒体查询。

来源

2013-09-28 12:45:57 rwaymouth

感谢您的答复rwaymouth但并不至于下拉项填充视口的宽度，我在图中已经显示出应对的总体布局问题。 – nickpish

谢谢rwaymouth--我们越来越近:)我更新了jsFiddle [这里]（http://jsfiddle.net/nickpish/Nmh9Z/18/）。虽然折叠菜单正常工作，但现在问题出现在未折叠状态，因为导航是向左浮动并与标题重叠。我猜真正的挑战是让nav在正常状态下保持浮动状态，并在“折叠”状态下将标题下方的100％宽度填充。还有什么想法？ – nickpish

从查看jsFiddle看起来问题是您的媒体查询设置为768px，菜单断点设置为600px，当屏幕在600像素和768像素之间时，您可以重叠。如果将'resizeWidth'选项更改为768px，则看起来所有内容都可以正常工作。 – rwaymouth

设计一个可折叠的响应导航栏

回答

相关问题