自定义响应式下拉菜单

时间:2013-09-06 02:25:17

标签: javascript html css mobile responsive-design

我正在尝试将Responsive Nav集成到我的网站中,并且在设置所需的布局时遇到了一些困难。

我创建了一个JSFiddle here;您可以调整“结果”面板的宽度,以查看导航栏折叠到响应下拉菜单图标。实际下拉栏的功能是完美的;但是,我遇到的问题是当它没有折叠到菜单中时,试图使导航链接在标题旁边浮动。因此,不是让(未折叠的)链接列表位于标题下方,而是将它们放在标题下面,但是当脚本激活图标时,它会下拉。

CSS是我自己的组合,有些来自插件开发者的一个例子。我想我最终会看到nav#primary ul浮动对着标题(H1),然后display:block折叠到响应式导航栏中。

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

试试这个→http://jsfiddle.net/matbloom/3DUj5/

这应该可以解决问题:

nav#primary {
    float: right;
    width: 70%;
}

只需调整#primary的宽度即可使用您的演示文稿,您应该全部设置。