Fixed Search Button Dengan Javascript

Shared By Dunia Blanter ~ Fixed Search Button.

by Rhinokage Rio

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div class='blanter-search'>
</div>
  <div class='search-form'>
<form action='/search' class='searchform' method='get'>
  <input class='searchbar' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here'/>
  <input class='searchsubmit' type='submit' value='Search'/>
</form>
</div>
  <div class='searchblanter'><i class='icon-search' style='font-size: 20px;'/></div>

CSS

/* CSS Fixed Search Button */
.blanter-search {position:relative;padding:0;height:0;margin:0 auto;}
.main-nav ul li.searchbutton {background:transparent;margin:0;padding:7px 18px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;}
.main-nav ul li.searchbutton.active {color:#e8eaef;}
.main-nav ul li.searchbutton:after {content:&quot;\f002&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#6b6c71;position:relative;}
.main-nav ul li.searchbutton.active:after {color:#fc4f3f;}
.search-form {display:none;position:fixed;bottom:0;left:0;background:rgba(31,32,37,0.90);
padding:5px 0;width:100%;z-index:91;margin:0 auto;box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.16);}
.searchform {margin:0 auto;text-align:center;line-height:45px;}
.searchbar {background:transparent;width:70%;font-weight:400;font-size:20px;font-family:&#39;Roboto&#39;,sans-serif;color:#6b6c71;margin:0 auto;border:none;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;}
.searchbar:focus {color:#9eb2c0;}
.searchsubmit {background:#07ACEC;border:none;outline:none;cursor:pointer;
color:#fff;padding:0 25px;text-transform:uppercase;font-weight:400;font-size:16px;
font-family:&#39;Roboto&#39;,sans-serif;line-height:45px;
transition:background-color 1s ease-out 0s;}
.searchsubmit:hover {background:#2e3138;color:#fff;box-shadow: inset 0 0 0 2px #07ACEC;}
.searchsubmit:active {background:#fe4e3f;color:#fff;box-shadow:none;border:none;outline:none;}
.searchblanter{position:absolute;top:10px;right:47px;text-align:center;padding:0;color:#292929;font-size:44px;font-weight:400;line-height:25px;cursor:pointer;transition:all .4s ease-in-out;}
.searchblanter:hover{color:#07ACEC;}

JavaScript

$(function(){
$('.searchblanter').click(function(){
  $(this).toggleClass('active');
  $('.search-form').slideToggle('normal');
});
});