css

body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-
top:20px;margin-left:auto;margin-right:auto;padding:0; padding-
right:10px;width:970px;height:40px;list-style-type:none;-webkit-border-
radius:11px;-moz-border-radius:11px;border-radius:11px;-webkit-box-shadow:0 1px 3px
rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px
rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial,
Helvetica, sans-serif;font-weight:bold;position:relative;min-
width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-
bottom:10px;text-decoration:none;text-shadow:0 1px 1px
rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:11px;-webkit-
border-bottom-left-radius:11px;-moz-border-topleft-radius:11px;-moz-border-
bottomleft-radius:11px;border-top-left-radius:11;border-bottom-left-
radius:11px}.Red,.Red .button a{color:#faddde;background: #ed1c24;border-
right:solid 1px #aa1317;background: -moz-linear-gradient(top, #ed1c24 0%, #aa1317
100%);background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,#ed1c24), color-stop(100%,#aa1317));background: -webkit-linear-
gradient(top, #ed1c24 0%,#aa1317 100%);background: -o-linear-gradient(top, #ed1c24
0%,#aa1317 100%);background: -ms-linear-gradient(top, #ed1c24 0%,#aa1317
100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24',
endColorstr='#aa1317',GradientType=0 );background: linear-gradient(top, #ed1c24
0%,#aa1317 100%);}.Red .button a:hover,.Red .button a:focus{background:
#c9151b;background: -moz-linear-gradient(top, #c9151b 0%, #a11115 100%);background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9151b), color-
stop(100%,#a11115));background: -webkit-linear-gradient(top, #c9151b 0%,#a11115
100%);background: -o-linear-gradient(top, #c9151b 0%,#a11115 100%);background: -ms-
linear-gradient(top, #c9151b 0%,#a11115 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9151b',
endColorstr='#a11115',GradientType=0 );background: linear-gradient(top, #c9151b
0%,#a11115 100%);}.Red .button a:active{color:#de898c;background:
#aa1317;background: -moz-linear-gradient(top, #aa1317 0%, #ed1c24 100%);background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#aa1317), color-
stop(100%,#ed1c24));background: -webkit-linear-gradient(top, #aa1317 0%,#ed1c24
100%);background: -o-linear-gradient(top, #aa1317 0%,#ed1c24 100%);background: -ms-
linear-gradient(top, #aa1317 0%,#ed1c24 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa1317',
endColorstr='#ed1c24',GradientType=0 );background: linear-gradient(top, #aa1317
0%,#ed1c24 100%);}.search{position:relative;float:right;margin-top:10px;}.search
input[type=text]{width:120px;height:20px;padding-left:18px;margin-
left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px;
-moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: inset 1px 1px 3px
#7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}.search a:before
{width:6px;height:6px;border:2px solid #000;background:transparent;-webkit-border-
radius:12px;-moz-border-radius:12px;border-radius:12px;}.search a:after
{left:24px;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-
transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}li
a:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li a:before,
li a:after {margin:-7px 0 0;background: #000;}

Html
<ul id="menu_wrap" class="Red"><li class="button"><a href="#">Home</a></li><li
class="button"><a href="#">Aplikasi</a></li><li class="button"><a
href="#">Driver</a></li><li class="button"><a href="#">Game</a></li><li
class="button"><a href="#">Utility</a></li><li class="button"><a
href="#">Film</a></li><li class="button"><a href="#">Musik</a></li> <li
class="search"><a href="#"></a><input type="text" placeHolder="Search"
/></li></ul>

Javascript
 <script type="text/javascript" src="http://code.jquery.com/jquery-
1.6.1.min.js"></script><script type="text/javascript">var search_input= $('.search
input[type=text]');var search_input_size = 120; var search_large_size = 180; var
padding = 7; var shrinked = "";$(document).ready(function()
{search_input.click(function(){shrink();}).focus(function()
{shrink();});search_input.blur(function(){ if(shrinked=="YES")normal();});$
('.button a').hover(function(){if(shrinked=="YES")normal();}); });function shrink()
{if(search_input_size < search_large_size ){$('.button a').each(function(){$
(this).animate({'padding-left': padding+'px','padding-right':
padding+'px'},'fast');});search_input.animate({'width':
search_large_size+'px'},'fast'); shrinked="YES";}return false;}function normal()
{search_input.animate({'width':search_input_size+'px'},'fast'); $('.button
a').animate({'padding-left':'10px','padding-
right':'10px'},'fast');shrinked="";search_input.blur();return false;}</script>