Adding a Fade-in Search Form

Site search is one of those web elements that we know is a necessity but which is often overlooked in terms of its implementation. As we have previously covered, search forms can be displayed a wide variety of manners. Search inputs can show in dropdown bars or in expandable sections. An additional method calls for the search form to fade-in and fill the entire screen.

This method, while certainly not applicable to every design, does have some benefits. First, the effect largely does not interfere with other design elements. Since the search from appears as a full-screen overlay, you do not have to perfrom any css jiu jitsu to accomodate the new element. Furthermore, with the search form full screen you give clear focus for your end users.

The JavaScript needed to accomplish this is minimal and can be attached to any CSS class. Below is the HTML, CSS, and JavaScript required.

Step 1 — fade-in-search.html

Copy and paste the code below into your web page

<div class="search-box">
  <a href="#" class="search-close"><img src="https://www.solodev.com/assets/fade-in-search/close.png" alt="Close Icon"></a>
  <div class="container">
    <div class="row">
          <form class="search-form col-lg-10 col-lg-offset-1" action="">
            <input id="header-search" placeholder="What are your looking for?" required="" type="text" name="q"> <button class="search-submit" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
          </form>
         </div>
  </div>
</div><!-- .search-box -->
<div class="topmenu" style="background: none;">
  <a href="#" class="logo" title="Go to homepage"><img src="https://www.solodev.com/assets/fade-in-search/logo.png" alt="WebCorpCo Logo" class="img-responsive"></a>
  <div class="nav hidden-sm hidden-xs">
        <ul>
          <li><a href="#" class="dropdown-toggle">About</a></li>
          <li><a href="#" class="dropdown-toggle">Services</a></li>
          <li><a href="#" class="dropdown-toggle">Resources</a></li>
        </ul>
    <a href="#" class="button open-search"><i class="fa fa-search"></i></a>
  </div><!-- .nav -->
        
  <div class="nav visible-sm visible-xs pull-right">
    <ul>
      <li><a href="#" class="button open-search"><i class="fa fa-search"></i></a></li>
          <li><a class="js-toggleMenu" href="#"><i class="fa fa-bars"></i></a></li>
    </ul>
    </div><!-- .mobile-nav -->
</div>

Step 2 — fade-in-search.css

Download the CSS below and include it in your web page

fade-in-search.css

Step 3 — fade-in-search.js

Copy and paste the code below into a file called fade-in-search.js

$( document ).ready(function() {
    $(document).on('click', '.search-close', function(){
        $('.search-box').fadeOut();
    });
    $(document).on('click', '.open-search', function(){
        $('.search-box').fadeIn();
    });
});

Step 4 — Add the includes below to your web page

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="fade-in-search.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="fade-in-search.js"></script>

The above code will create a search form overlay that fades in with the necessary user interaction. Customize the content, or even add search filters to your form. Happy designing!

Demo on JSFiddle

Download from GitHub

Originally Posted on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.