Apple style search box extension in menu bar

Question

I am coding a website and I am trying to reproduce the effect of apple.com , where when you click to focus the search box on the menu bar, the search box expands and the rest of the menu bar is compressed to accommodate it.

I tried various tricks with jquery kwicks and also just expanded the 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 would really appreciate it!

Best Daniel

Answer 1

this can be done by css, just don't need javascript or anything else ...

#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 this, it looks like their big step is this (I could be wrong - I'm in a hurry):

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

This is a rather unusual CSS rendering value and clever of them, making <li> work like <td> . This means that changing the width of one of the “cells” causes the others in the same “row” to adjust how much space they take out.

Long time (fake) tabular layout!

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

Answer 3

Not to simplify things, but what if in your css you are floating: correctly; this is an input field, and then in focus you animate the field with the corresponding width like this:

CSS

 #inputtext{ float:right; width:150px; } 

JQuery

 $("div#inputtext").focus(function(){ $(this).animate({width:'300px'}, 1000); }); 

Answer 4

This is the violin for this. http://jsfiddle.net/MenuSo/r4xq9gz2/

HTML:

  <form id="expanding-form"> <input type="text" id="expanding-input" placeholder=""> <button type="submit">Search</button> </form> 

and CSS:

 #expanding-form input{ width: 30px; height: 30px; -o-transition: width .5s ease; -ms-transition: width .5s ease; -moz-transition: width 0.5s ease-out; -webkit-transition: width 0.5s ease-out; transition: width 0.5s ease-out; } #expanding-form input:focus{ width: 200px; } 

CSS will be enough.