自定义响应式下拉菜单

Customizing a responsive drop down menu

本文关键字：下拉菜单 响应 自定义      更新时间：2023-09-26

>我正在尝试将响应式导航集成到我的网站中，但在建立所需的布局时遇到了一些困难。

我在这里创建了一个JSFiddle;您可以调整"结果"面板的宽度，以查看导航栏折叠为响应式下拉菜单图标。实际下拉栏的功能是完美的;但是，我遇到的问题是，当导航链接未折叠到菜单中时，试图使导航链接在标题旁边浮动。因此，与其让（未折叠的）链接列表位于标题下方，我希望它们位于标题旁边，但在脚本激活图标时下拉。

CSS是我自己的组合，还有一些来自插件开发人员的示例。我想我最终会考虑让nav#primary ul靠在标题 （H1） 上浮动，然后在折叠到响应式导航栏中时display:block。

感谢您在这里提供任何帮助。

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

这应该可以解决问题：

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

只需调整 #primary 的宽度即可与您的演示文稿配合使用，您应该已经全部设置好了。

相关文章：