Konsep Kotak Pencarian Tersembunyi di dalam Header

HTML

<header id='site-header'>
    <div class='inner'>
        <h1><a href='/'>Site Name</a></h1>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class='inner hidden'>
        <form action='/search' method='get'>
            <input type='text' name='q' placeholder='Search...'>
        </form>
    </div>
</header>

CSS

#site-header {
  background-color:#6A2E79;
  overflow:hidden;
  text-shadow:0 1px 0 rgba(0,0,0,.1);
  margin:0 0 20px;
  position:relative;
}

#site-header .inner {padding:20px 30px}

#site-header a {
  text-decoration:none;
  color:white;
}

#site-header a:hover {color:#E0FFED}

#site-header h1 {
  font-size:30px;
  text-transform:uppercase;
}

#site-header p {margin:10px 0 0}

#site-header form input {
  border:1px solid #743983;
  background-color:#3B2440;
  font:normal normal 12px Verdana,Arial,Sans-Serif;
  color:#95799B;
  padding:5px 5px;
  margin:0 auto;
  display:block;
  width:98%;
  -webkit-box-shadow:inset 0 1px 3px black;
  -moz-box-shadow:inset 0 1px 3px black;
  box-shadow:inset 0 1px 3px black;
}

#site-header .toggle-button {
  display:block;
  font-weight:bold;
  padding:10px 18px;
  text-align:right;
  border-top:1px solid #5D216C;
}

.hidden {display:none}

JQuery

$(function() {
    var $header = $('#site-header'),
        $panel = $header.find('.inner');
    // Insert a toggle button
    $header.append('<span class="toggle-button"><a href="/">Search</a></span>');
    // Click the toggle button to slide the panel
    $header.find('.toggle-button a').on("click", function() {
        if ($(this).html() == 'Search') {
            $(this).html('&times;');
        } else {
            $(this).html('Search');
        }
        $panel.slideToggle('slow');
        return false;
    });
});

Lihat Demo