Subtle CSS3 Menu With Stretchy Searchbox

"So this is another CSS experiment I did a while ago, I tried to create the same search box feature as on apple.com that stretches and manipulates widths of the menu. But I wanted to use only CSS. It falls back well in older browsers, Just no transitions are supported. Only image used is for the search icon - too lazy to do the CSS for it ;)" 

LIVE DEMO

CSS

html { font-family: helvetica } .navMenu { height: 36px; line-height: 36px; width: 900px; /* CSS 3 */ background-image: linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%); background-image: -o-linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%); background-image: -moz-linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%); background-image: -webkit-linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%); background-image: -ms-linear-gradient(bottom, rgb(170,170,170) 11%, rgb(238,238,238) 77%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.11, rgb(170,170,170)), color-stop(0.77, rgb(238,238,238)) ); border-radius: 5px; } .navMenu a { color: #333; border-right: 1px solid rgba(255,255,255,.5); display: inline-block; float: left; font-size: 12px; padding: 0 15px; text-align: center; text-shadow: 0 1px 1px #FFF; text-transform: uppercase; text-decoration: none; width: 115px; /* CSS3 */ -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .navMenu a:hover { background-color: rgba(0, 0, 0,.05) } .navMenu input { background: url(http://cssdeck.com/uploads/media/items/4/4yK4Jqj.jpg) 5px center no-repeat #FFF; border: 1px solid #AAA; color: #666; float: right; font-size: 11px; margin: 7px 32px 0 0; opacity: 0.6; outline: none; padding: 3px 5px 3px 20px; width: 80px; /* CSS3 */ border-radius: 5px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .navMenu input:hover { opacity: 1 } .navMenu input:focus { opacity: 1; width: 180px; } .navMenu input:focus ~ a { width: 95px }

HTML

<div>

<div class="navMenu expander">

<form action="">

<input type="text" />

<a href="#">Home</a>

<a href="#">Products</a>

<a href="#">Gallery</a>

<a href="#">Stores</a>

<a href="#">Contact</a>

</form>

</div>

</div>