【问题标题】:Customizing a responsive drop down menu自定义响应式下拉菜单
【发布时间】:2013-09-10 00:43:43
【问题描述】:

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

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

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

在这里感谢您的任何帮助。

【问题讨论】:

    标签: javascript html css mobile responsive-design


    【解决方案1】:

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

    这应该可以解决问题:

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

    只需调整#primary 的宽度以配合您的演示文稿,您就应该准备就绪。

    【讨论】:

    • 谢谢马特-尽管仍然存在菜单链接在扩展响应式下拉菜单时仍然浮动到右侧的问题,但单击该解决方案时,我希望显示链接就像他们在我最初的例子中所做的那样;不知道如何实现这一点..
    • 嗨,马特——感谢您在这里的帮助;您的调整在 Firefox 中看起来很完美,但我看到在 Chrome 中,链接虽然现在对齐了,但仍然落在标题下方;有什么想法吗?
    • 嗨@nickpish,你是对的。用 'display: inline' 更新第一个 'header h1': header h1 { display: inline; color: #fff; }
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-11
    • 2012-10-12
    相关资源
    最近更新 更多