apple style expanding search field in menu bar

Question

I'm coding a website and I'm trying to replicate the effect on the apple.com where when you click to focus the search field in the menu bar, and the search field expands and the rest of the menu bar shrinks to accommodate it.

I've been trying various tricks with jquery kwicks, and also simply expanding a text field using the animate function in jquery but the effect is not the same. If someone could get me on the right track I'd very much appreciate it!

Best Daniel

Answer 1

this can be done by css only no need for javascript or anything...

#search input {
 width: 100px;
 -moz-transition: width 0.5s ease-out;
 -webkit-transition: width 0.5s ease-out;
 transition: width 0.5s ease-out;
}
#search input:focus {
 width: 200px;
 -moz-transition: width 0.5s ease-out;
 -webkit-transition: width 0.5s ease-out;
 transition: width 0.5s ease-out;
}

voila, thats it ;)

Answer 2

Taking a quick look at how Apple did it, it looks like their big move is this (I could be wrong - I'm rushing):

#globalheader #globalnav li { display: table-cell; width: 100%; overflow: hidden; }

This is a pretty unusual CSS display value, and clever on their part, forcing the <li>'s to work like <td>'s. This means that changing the width of one of the "cells" causes the others in the same "row" to adjust how much room they take out.

Long live (fake) table-based layout!

So, assuming that CSS is possible for you, and I'm not off base with my quick glance at their code, your only task is to animate the width of the search box - the rest should follow suit.