Search Box Di Bawah Header Dengan Toggle

by kompiajaib

HTML

<div id='bungkus-header'>
<div id='header-blog'>
<div class='content-wrapper'>
<span class='homeblog'><a href='/' title='Homepage'>TITLEBLOGANDA</a></span>
    <span class="search-text" id="run">Search</span>
</div>
</div>
<div class="toggler"> 
  <div id="box">
<div id='search'>
    <div class='content-wrapper'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' 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 ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='http://2.bp.blogspot.com/-2jHjDZuQt-Q/Uluj1K7q-AI/AAAAAAAAaPE/k2uOoGDyrjw/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>
      </div>
    </div>
</div></div>
<div id='menu-wrapper'>
<div class='content-wrapper'>
<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='prett' href='#'>Drop Menu</a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a class='prett' href='#'>Drop Menu 1</a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>
</div>
    </div>

CSS

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}

.content-wrapper{position:relative;max-width:80%;margin:0 auto}
#bungkus-header{margin: 0 auto;padding: 0;background: #ececec;}
#header-blog{margin: 0 auto;padding: 0;width:100%;position: relative;height: 100px;background: #ececec;}
span.homeblog{font:34px Oswald;
    margin-left:0;
    margin-top:20px;
    position:absolute;float:left}
span.homeblog a{color:#333;text-decoration:none}
span.homeblog a:hover{color:#ef7f67}

#search {background: #ececec;text-align:center}
#search-form {color:gray;
    width:50%;
    padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:0 0 10px;border:1px solid #ccc;border-radius:2px}
.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}
#box {display:none}
.search-text {font:14px Oswald;float:right;cursor:pointer;margin-top:38px}
.search-text:hover {color:#ef7f67}

#menu-wrapper{background:#464646;color:#eee;height:35px;width:100%}
#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label...

JavaScript

$(function() {  
    $("#run").click(function () { 
    $("#box").toggle("blind") 
}); 
 });