Create Onclick Search Box Open with CSS

Let’s have a look another nice and unique way to add a search bar. When onclick a search button, a search box will open with nice animation. It builds with CSS, Jquery and a few lines of Javascript.

It slides out or expandable search bar which is perfect to implement on the header. You can implement it on the navigation bar and add it next to menu link.

When the user clicks on magnifying glass icon, it will hide the main menu links and show the search bar over it. It gives a nice user experience and increases the beauty of a website.

Create Expendable Search Bar

Add the main jQuery file and a slideout.css in the head.

<link rel="stylesheet" type="text/css" href="slideout.css" />
<script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

There are three different version of the search bar. Let’s have a look at the HTML of the first one. You can find other versions in the demo and download source.

<header id="header-1" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-1"></a>
    </div>
    <ul class="menu">
      <li><a href="#">For Business</a></li>
      <li><a href="#">For Personal</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <form action="" class="search-box">
      <input type="text" class="text search-input" placeholder="Type here to search..." />
    </form>
  </nav>
</header>

In the end, define initial the Javascript.

<script type="text/javascript">
$( document ).ready(function() {
	$('.header').on('click', '.search-toggle', function(e) {
	  var selector = $(this).data('selector');
	
	  $(selector).toggleClass('show').find('.search-input').focus();
	  $(this).toggleClass('active');
	
	  e.preventDefault();
	});
});
</script>