Horizontal Tab menu with Search Form

Horizontal tab menu ini telah dilengkapi dengan sebuah search form yang terpadu. Posisi search form ada disisi sebelah kanan dan search form ini dibangun dengan menggunakan kode css3 transition yang berfungsi membentuk animasi saat search form di klik. Untuk melakukan pencarian tuliskan kata yang berkaitan dengan topik yang akan anda cari kemudian lanjutkan dengan klik "enter".

Kode CSS

form#GRsf{
      padding:0 0 0 10px;
      margin:0 auto;
      width:95%;
      height:45px;
      background:#000;
      font-family: arial, sans-serif;
      background:#000;
      background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
      background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
      background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
      background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
      border-radius:8px;
      box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
}
form#GRsf input{
      width:80px;
      height:20px;
      float:right;
      margin:10px 12px 0 0;
      border:0;
      background:#aaa url(http://www.cssplay.co.uk/menus/search.png) no-repeat 3px center;
      border-radius:10px;
      padding-left:20px;
      outline:none;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
}
form#GRsf input:focus {
      width:200px;
      background-color:#fff;
}
form a{
      display:block;
      float:left;
      height:34px;
      width:100px;
      text-align:center;
      color:#fff;
      line-height:35px;
      text-decoration:none;
      text-shadow:0 1px 5px rgba(0, 0, 0, 0.5);
      margin:5px 3px 0;
      background:#900;
      border-radius:6px 6px 4px 4px;
      -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
}
form#GRsf input:focus ~ a {width:80px;}
form#GRsf a:hover{background:#333; 
      background:#09c;
      border-radius:8px 8px 0 0;
      -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
      text-decoration:none;
}

xHTML

<form id="GRsf"  action="http://gubhugreyot.blogspot.com/search" method="get">
<input name="q" type="text" value="Search..." onfocus="if (this.value=='Search...') {this.value='';}" onblur="if (this.value=='') {this.value='Search...';}" />
 <a href="#url"><span>iHome</span></a>
 <a href="#url"><span>iProd</span></a>
 <a href="#url"><span>iServe</span></a>
 <a href="#url"><span>iContact</span></a>
 <a href="#url"><span>iBet</span></a>
 <a href="#url"><span>iKnow</span></a>
</form>