Tried few methods: * Make outer div as a display:table and every other element as display: table-cell. * Define search's width by calculating with jquery window resize. But when click window resize button, it's width is not as it should be.
Anyone got a idea about how to implement this navigation using pure CSS/ CSS3 or if not by jquery ?
Appreciate your ideas, helps...
There you go: http://jsfiddle.net/6jXcz/1/
Scales perfectly fine horizontally and independent of number of navigation items.
Explanation: I used the "table" CSS rules and forced the #search
to have a width of 100%. In order to prevent the logo (or any other elements) from getting "crushed", I used white-space: nowrap
on the #menu
and min-width
on the #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>
And 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%;
}
Adding to SB's answer, I would change the #search input
CSS to this to prevent resizing issues with the 98% width (you can see the padding to the right of the search box grows awkwardly on resizing on the original answer):
Fixed version: 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.