Expanding Search Bar with jQuery & CSS Transitions

Expanding Search Bar with jQuery & CSS Transitions

The expanding search bar is a new way in latest web design trends. Initially, The search bar is hidden from view and can expand when clicking on magnifying glass button.

It has a fluid width and works well on all kind of mobile devices. It can be designed by using CSS transitions property and a bit of jQuery require to handle its functionality.

We are going to demonstrate two different type of slide-out search bar.

The first one requires some jQuery and it will show when someone clicks on an input type search button.

The second one is developed with pure CSS and it is an animated search box which gives a nice smooth ease-in-out transition when click or leave.

A standard CSS search form is boring nowadays. Our expanding input field will neatly well fit next to the main menu with having a smart icon tag. It not only looks good but also enhances the beauty of your website.

Build Expanding Search Bar with jQuery & CSS Transitions

As we said above, we have prepared two version, First, one used jquery and another one is simple pure CSS. You will find both in demo and download, but here we will explain you only the jQuery method.

Let’s just simply wrap an input search form with a div class & ID name Exp-serach. We have an input type search field which has an onkeyup="buttonUp" function which will be later defined in the Javascript.

Next, A simple input type submits button and magnifying glass icon define inside a span tag.

1. The Markup

<div id="Exp-serach" class="Exp-serach">
    <form>
        <input class="ExpInput " onkeyup="buttonUp();" 
        placeholder="Enter your search term..." onblur="monkey();" 
        type="search" value="" name="search" id="search">
        <input class="Expbtn" type="submit"  value="">
        <span class="ExpIcon"><i class="fa fa-search"></i></span>
    </form>
</div>

As you can see HTML is very standard, nothing special. Now let’s move to next and see how the CSS will work.

2. The Styling

The first thing we need to make sure that the search icon should be visible and the rest should not be visible. But there is also another thing to be noticed, What happen if we increase the size of search bar? How can we make this possible? Just simply use of overflow: hidden and extend the width of the .Exp-serach wrapper.

.Exp-serach {
    position: relative;
    margin-top: 20px;
    width: 0%;
    min-width: 50px;
    height: 50px;
    float: right;
    overflow: hidden;
    
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
    -webkit-backface-visibility: hidden;
} 

Positioning Input

The next thing we need to position this search input. We added absolute position and the right/top should be set to zero because of the input visible on the right side. The width should be according to your requirement. I simply set it to 50% of my header column width

Furthermore, We setting the proper height, background color font-size, and padding to make sure the everything looks good just like the demo.

.ExpInput {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    color: #A0B58D;
    font-family: inherit;
    font-size: 20px;
    height: 50px;
    margin: 0;
    outline: medium none;
    padding: 0 2%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    z-index: 10;
}
input[type="search"].ExpInput {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
}

Removing Default Styles

Additionally, we need to remove the default styles of the input search bar for WebKit browsers. Let’s see how we will define the color of placeholder text.

.ExpInput::-webkit-input-placeholder {   
    color: #efb480;
}
 
.ExpInput:-moz-placeholder {
    color: #A0B58D;
}  
 
.ExpInput::-moz-placeholder {
    color: #A0B58D;
}
 
.ExpInput:-ms-input-placeholder {
    color: #A0B58D;
}

Next step is about looking at search icon and submit button. As we know that both are at the same place so we will define same style and position.

.ExpIcon,
.Expbtn  {
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    margin: 0;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

We need to make icon button to be clickable. when search bar open, the input submits button should be clickable. To get this done, we need to set z-index to -1 in the beginning and make it transparent.

.Expbtn {
    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;
    color:red;
    border: none;
    outline: none;
    z-index: -1;
}

.ExpIcon {
    color: #fff;
    background: #A0B58D;
    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;
}
 
.ExpIcon:before {
    content: "";
}

.Exp-serach.Exp-serach-open,
.no-js .Exp-serach {
    width: 100%;
}

.Exp-serach.Exp-serach-open .ExpIcon,
.no-js .Exp-serach .ExpIcon {
    background: #A0B58D;
    color: #fff;
    z-index: 11;
}

.Exp-serach.Exp-serach-open .Expbtn,
.no-js .Exp-serach .Expbtn {
/*    z-index: 90;*/
}

3. The JavaScript

Now finally we need to take care of Javascript. Let’s see how javascript will look like:

$(document).ready(function(){
function buttonUp(){
     var valux = $('.ExpInput').val(); 
        valux = $.trim(valux).length;
        if(valux !== 0){
            $('.Expbtn').css('z-index','99');
        } else{
            $('.ExpInput').val(''); 
            $('.Expbtn').css('z-index','-999');
        }
}
});

$(document).ready(function(){
    var submitIcon = $('.ExpIcon');
    var submitInput = $('.ExpInput');
    var searchBox = $('.Exp-serach');
    var isOpen = false;
    
    $(document).mouseup(function(){
        if(isOpen == true){
        submitInput.val('');
        $('.Expbtn').css('z-index','-999');
        submitIcon.click();
        }
    });
    
    submitIcon.mouseup(function(){
        return false;
    });
    
    searchBox.mouseup(function(){
        return false;
    });
            
    submitIcon.click(function(){
        if(isOpen == false){
            searchBox.addClass('Exp-serach-open');
            isOpen = true;
        } else {
            searchBox.removeClass('Exp-serach-open');
            isOpen = false;
        }
});

});

I hope you enjoyed this tutorial and found it very useful! Download and see the demo for both versions. Please leave comments and lets us know about this.

Code ExamplesYou May Also Like