Apple Navigation

Apples search box expanding navigation toolbar.

by Chris Nicholson

HTML

<ul>
    <li>Link 1</li>
    <li>Link 123</li>
    <li>Link 123456</li>
    <li>Link 1234567889</li>
    <li class="search"><input /></li>
</ul>

CSS

ul {
    display: table;
    width: 700px;
}

li {
    display: table-cell;
    width: 22%;
    padding: 10px 5px;
    background: red;
    border: 1px solid blue;
    text-align: center;
}
li.search {
    width: 12%;
}

input {
    width: 50px;
}

JavaScript

$('input').focus(function(){
    $(this).animate({ 'width': '150px'}, 400);
});

$('input').focusout(function(){
    $(this).animate({ 'width': '50px'}, 400);
});