Fluid and Mobile-Friendly Search Bar On Click

In this tutorial written by MARY LOU we're going to create a Fluid and Mobile-Friendly Search Bar that can be opened on click. The idea is to show a search icon on the web page. When clicking on the icon,  a search input will slide out.

How to use it:

1. Create the html for the search bar

<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>

2. The CSS

@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon/icomoon.eot');
src: url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),  url('../fonts/icomoon/icomoon.woff') format('woff'),  url('../fonts/icomoon/icomoon.ttf') format('truetype'),  url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.sb-search {
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;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0;
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
 .sb-search-input::-webkit-input-placeholder {
 color: #efb480;
}
 .sb-search-input:-moz-placeholder {
 color: #efb480;
}
 .sb-search-input::-moz-placeholder {
 color: #efb480;
}
 .sb-search-input:-ms-input-placeholder {
 color: #efb480;
}
.sb-icon-search, .sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
background: #e67e22;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "\e000";
}
/* Open state */
.sb-search.sb-search-open, .no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search {
background: #da6d0d;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit {
z-index: 90;
}

3. Include necessary javascript files on the page

<script src="js/classie.js"></script> 
<script src="js/uisearch.js"></script> 

4. Initialize the search bar

<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>

---

This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.