响应式设计导航菜单

Question

---

• 这是一个响应式设计.
• 徽标是此处唯一固定宽度的元素.其他元素的宽度应取决于thiere内容.
• 导航项目不可数.所以无法设置固定宽度.(可能是3或4个菜单项)
• 搜索元素的宽度应取决于其他元素.并尽可能地延伸到最大值.
• 用户名可以非常,因此无法在此处定义宽度.如果username更长,则元素的宽度更长.

尝试了几个方法:*将外部div作为display:table和其他所有元素作为display:table-cell.*通过使用jquery窗口调整大小来计算搜索的宽度.但是当单击窗口调整大小按钮时,它的宽度不是应该的.

任何人都知道如何使用纯CSS/CSS3或如果不是通过jquery实现此导航？

欣赏你的想法,帮助......

Answer 1

你去:http://jsfiddle.net/6jXcz/1/

水平缩放非常精细,与导航项目数量无关.

说明:我使用了"表"CSS规则并强制其#search宽度为100%.为了防止从得到"碎"的标识(或任何其它元件),我用white-space: nowrap的#menu和min-width上#logo.

<div id="table">
    <div id="menu">
        <div id="logo">LOGO</div>
        <ul id="navigation"><li>Item 1</li><li>Item 2</li></ul>
        <div id="search">
            <input type="text" name="search">
        </div>
        <div id="user">Username</div>
    </div>
</div>

和CSS:

#table {
    display: table;
    width: 100%;
}
#menu {
    background: grey;
    line-height: 50px;
    white-space: nowrap;
    display: table-row;
}
#menu > * {
    display: table-cell;
    text-align:center;
    height: 50px;
}
#logo {
    min-width: 200px;
    width: 200px;
}
#navigation {
    list-style-type: none;
    margin:0;
    padding:0;
}
#navigation li {
    display:inline-block;
    height: 50px;
    background: #999;
    padding: 0 5px;
}
#search {
    background: #aaa;
    width: 100%;
}
#search input {
    width: 98%;
    padding: 0;
    margin: 0;
    border: none;
    height: 92%;
}