响应式设计导航菜单

Question

响应式设计导航菜单

jqueryhtmlcss

6

输入图像描述

这是一个响应式设计。
Logo是唯一的固定宽度元素。其他元素的宽度应该根据它们的内容而定。
导航项是不可计数的。所以无法设置固定宽度。（可能只有3或4个菜单项）
搜索元素的宽度应该取决于其他元素，并尽可能地伸展到最大宽度。
用户名可以非常长，因此不能在此处定义宽度。如果用户名更长，则元素的宽度更长。

尝试了几种方法： * 将外部div设置为display:table，将其他每个元素设置为display:table-cell。 * 通过使用jquery窗口调整大小来计算搜索的宽度。但是当点击窗口调整大小按钮时，其宽度不正确。

有没有想法通过纯CSS / CSS3或者jquery实现这个导航？

感谢您的思路和帮助...

- stackminu

这似乎是有史以来最简单的问题，但当你尝试时，会感觉有点棘手... 有人有想法如何使搜索元素达到100%吗？ - stackminu

2个回答

0

在 S.B. 的答案基础上，我会将 #search input 的 CSS 更改为以下内容，以防止在 98％宽度方面出现调整大小问题（您可以看到搜索框右侧的填充在原始答案中在调整大小时会不自然地增长）：

修复版：http://jsfiddle.net/6jXcz/2/

#search input {
    vertical-align: top;
    width: 100%;
    height: 46px;
    margin: 2px 0;
    padding: 0;
    border: none;    
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

- Justin

是的，没错，我在编码时添加了那部分内容。然后过来提一下。还有......你评论了那部分。呵呵呵...谢谢伙计。 :) - stackminu

有什么方法可以使它与IE7兼容吗？ - stackminu

尽管大多数Web开发人员不再支持IE7...https://dev59.com/b3E85IYBdhLWcg3wLAQV - Justin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- S.B. · Accepted Answer

这是链接：http://jsfiddle.net/6jXcz/1/

水平放置和导航项目数无关，可以完美缩放。

说明：我使用了“表格”CSS规则，并强制#search宽度为100％。为了防止徽标（或任何其他元素）被挤压，我在 #menu 中使用white-space: nowrap，并在#logo 上使用 min-width。

<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%;
}