Creating An Expandable Search Bar with jQuery and CSS3

In the post we're going to create an animated search bar that will expand to a search input when focused and collapse to a search icon when lose focus, based on jQuery and CSS3 transform.

See also:

• jQuery Plugin To Expand and Collapse Input Field - Expandable Input

How to use it:

1. Create the Html for the animated search bar.

<div class="js-wrapper">
<div class="glass">
<div class="glass-body"></div>
<div class="glass-handle"></div>
</div>
<input type="search" class="searchbar">
</div>

2. The CSS to style and animate the search bar.

.glass {
width: 1em;
height: 1em;
position: absolute;
}
.glass-body {
width: 0.9em;
height: 0.9em;
border: 4px solid grey;
border-radius: 100%;
position: relative;
top: 0.5em;
left: 0.5em;
}
.glass-handle {
width: 1em;
height: 0.2em;
border: 4px solid grey;
border-radius: 6px;
position: relative;
top: 0.35em;
left: 1.25em;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-rotate-tranform: rotate(45deg);
-o-transform: rotate(45deg);
}
.black-col {
border-color: black;
}
.searchbar {
width: 19.3em;
height: 2.6em;
position: relative;
top: 0.55em;
left: 4em;
border: 0;
border-radius: 6px;
}

3. Load the latest version of jQuery library from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

4. The javascript.

$(function() {
$('.js-wrapper').mouseenter(function() {
//alert("System running.");
$(this).animate({
width: '+=17em',
}, 'fast');
$('.glass-body').toggleClass('black-col');
$('.glass-handle').toggleClass('black-col');
});
$('.js-wrapper').mouseleave(function() {
$(this).animate({
width: '-=17em',
}, 'fast');
$('.glass-body').toggleClass('black-col');
$('.glass-handle').toggleClass('black-col');
});
});

---

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