GOOCODE - Find your code/scripts

12 Search bar on our website is essential, especially in the limited page space, placing a major search bar is a problem, and today I'm going to tell you about with examples of how to use CSS3 and jQuery to implement a scalable functionality search bar.

In the example, we only show a search button, when you click the search button, sliding from right to left input box to start entering the search, click the search button jumps to the search results page, the search input box away.
HTML
Placed in the search bar to be placed in the following html code pages, search bar #search_bar contains a form # myform form, the form to place a search box #search, a search button and search button icons .search_btn .search_ico.

  <div class="demo">
  		<div id="search_bar" class="search_bar">
			<form id="myform">
				<input class="input" placeholder="What do you want to search..." type="text" name="key" id="search">
				<input class="search_btn" type="submit" value="">
				<span class="search_ico"></span>
			</form>
		</div>
        <div id="show">Welcome to come to GOOCODE.NET.<br/>Click the right search button to have a look--></div>
  </div>

CSS
We used to beautify the entire search bar layout by CSS, which we use CSS3 code.

.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} 

The code is a key transition: width 0.3s; you can animate the CSS3, width from 0 becomes 100%, we can look to the specific CSS3 manuals, but here much description, you can copy and modify the code apply to your project.
jQuery
When you click on the search button, the search bar .search_bar by toggleClass () to switch styles .search_open, which implements the search bar contraction and extension functions. In addition, we also need to determine the input case, when the input condition is satisfied, Submit search form to realize the search function, see the code:

$(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; 
        } 
    }); 
}); 

This effect can be applied to the mobile terminal project, of course, you can also manually add slide effect.