Responsive design navigation menu

Question

---

• This is a responsive design.
• Logo is the ONLY fixed width element in here. Other element’s width should be depend by thiere content.
• Navigation item are uncountable. So No way to set a fixed width. (May be 3 or 4 menu items)
• Search element’s width should be depends with other elements. and streach to the maximum it can.
• Username can be very, so can’t defined a width in here. If username is longer, the element’s width is longer.

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...

Answer 1

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

Answer 2

Adding to S.B.'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;
}