使用css3和jquery实现可伸缩搜索框

--[link](http://www.jb51.net/css/136394.html)

## CSS
```css
.search_bar{position: relative;margin-top: 10px; 
width: 0%;min-width: 60px;height: 60px; 
float: right;overflow: hidden; 
-webkit-transition: width 0.3s; 
-moz-transition: width 0.3s; 
transition: width 0.3s; 
-webkit-backface-visibility: hidden; 
background:#162934; 
}

.input{ 
position: absolute;top: 0;right: 0; 
border: none;outline: none; 
width: 98%;height: 60px; line-height:60px;z-index: 10; 
font-size: 20px;color: #f9f9f9;background:transparent 
}

.search_ico,.search_btn { 
width: 60px;height: 60px;display: block; 
position: absolute;right: 0;top: 0; 
padding: 0;margin: 0;line-height: 60px;cursor: pointer; 
}

.search_ico{background: #e67e22 url(icon.png) no-repeat 18px 20px;z-index:90;} 
.search_open{width: 100% !important; z-index:1002} 
#show{position:absolute; padding:20px} 
```
## JS
当点击搜索按钮时，搜索条.search_bar通过toggleClass()切换样式.search_open，这就实现了搜索条收缩和伸展功能。另外我们还需要判断输入情况，当输入满足条件时，提交搜索表单实现搜索功能。
```javascript
$(function(){ 
$(".search_ico").click(function(){ 
$(".search_bar").toggleClass('search_open'); 
var keys = $("#search").val(); 
if(keys.length>2){ 
$("#search").val(''); 
$("#myform").submit(); 
}else{ 
return false; 
} 
}); 
}); 
```