Sliding Search Form – Tutorial

So you have written your first website, and you want to make the search form more interesting. Yay! You are hero. The only thing that sets you back is your lack of ideas on how to do that. Fear no more as I will be showing you how to spice-up your search form by making the search input slide out of the search button.
Let`s crack on with the markup and we will talk later about the styling and actually making the search input to slide. Nothing interesting here, just some plain old HTML form markup.

<form id = "search-wrap">
    <input type = "text" name = "search" id = "search-box" />
    <div id = "search-button" onclick="expand()"><i class="fa fa-search fa-2x"></i></div>
</form>

This is the part where thing get a little bit interesting. We will be using the animation property from CSS3 to make the slide effect take place when we will resize the input form. The rest of the styling is just to make things look OK. If you want to make the input slide on the right, you just need to make the #search-box float to the right.

#search-button{
     background: #3c3c3c;
     width: 30px;
     height: 30px;
     padding:10px;
     float:left;
     color:#fff;
     transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -webkit-transition: all 0.2s ease-in-out;
 }
 #search-button:hover{
     background:#ff5151;
     transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -webkit-transition: all 0.2s ease-in-out;
 }
 #search-box{
     padding:9px 15px 10px 15px;
     font-size:20px;
     float:left;
     width: 0px;
     margin-right: -40px;
     transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -webkit-transition: all 0.2s ease-in-out;
     outline:none;
 }

This is the part where we will be making the search box slide out of the search button. We will be using a normal JS function mixed up with some JQuery selections and css editing. We will be using an HTML class that will say to the function if the search-box will be shown or not, and we will do some css changes accordingly.

function expand(){
    if($(".opened")[0]){
        $("#search-box").css("width" , "0")
        $("#search-box").css("margin-right","-40px");
        $("#search-box").removeClass('opened');
    }
    else{
        $("#search-box").css("width" , "200")
        $("#search-box").css("margin","0");
        $("#search-box").addClass('opened'); 
    }
}

That`s basically all that you need to make the sliding search form. I hope that you liked this new format and if you want to see more of this format, leave a comment down below telling me that you want more Tutorials.

BMC

My name is BMC and I am a superhero. Well, maybe not a superhero, but what is certain is that I am an aspiring writer with high hopes and big dreams. I started writing in the summer of 2013 on this website and let me say, it is a fantastic ride!

You may also like...

Leave a Reply