How To Code a Hidden Dropdown Search Form using jQuery




Expanding search fields have become a popular choice for designers looking for extra room on the page. Almost every website is going to need a search field somewhere in the layout. It’s practically a necessity for any visitor who is looking for a specific page or bit of information.

As trends advance user interfaces are advancing, too. In this tutorial I want to demonstrate an alternative to small expanding search fields. I’ll be creating a hidden dropdown search field which appears just beneath the page header. It only displays when the user toggles a search link and it’s always readily available from any page. Take a look at my sample demo below:

jquery animated toggle search field open source preview

Live DemoDownload Source Code

Getting Started

I’ll first create a new HTML5 page with a link to my custom styles.css CSS stylesheet. This tutorial is going to use jQuery, so you’ll either need to download a local copy or link to a CDN hosted alternative. I’m also using Font Awesome to generate CSS-only search icons. You can also download and store this locally or link directly to a CDN.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Hidden Dropdown Search Field - SpyreStudios Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico">
  <link rel="icon" href="http://spyrestudios.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

To create the page itself I’ve centered a wrapper in the middle with a few page sections. The top contains a simple heading along with navigation links, followed by the hidden search field. Then I’ve added a full-width image background and some basic page text.

<header id="topbar" class="clearfix">
  <div id="logo">SiteName</div>
  
  <nav id="topnav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Somepage</a></li>
      <li><a href="#">Nothing</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#" id="searchtoggl"><i class="fa fa-search fa-lg"></i></a></li>
    </ul>
  </nav>
</header>

<div id="searchbar" class="clearfix">
  <form id="searchform" method="get" action="searchpage.php">
    <button type="submit" id="searchsubmit" class="fa fa-search fa-4x"></button>
    <input type="search" name="s" id="s" placeholder="Keywords..." autocomplete="off">
    
  </form>
</div>

If you look at the navigation list you’ll find the last link a bit peculiar. The anchor link itself uses an ID #searchtoggl which can be triggered using jQuery. But the internal text isn’t text at all, instead it’s an icon generated by Font Awesome. The classes fa and fa-lg apply the larger default Font Awesome styles, and the fa-search class will generate a magnifying glass icon.

Beneath the header I’ve created a container div with the ID #searchbar. The search form itself has two floated elements – the input field and the submit button. The form doesn’t work because it points towards a non-existent PHP file. However just a couple tweaks and this form would be running like clockwork.

I’m using a button element because the submit input is a little tricky with Font Awesome. Instead I can make the button act like a submit button, and the internal text is created with Font Awesome classes.

Stylin’ with CSS

My stylesheet file contains all the typical resets I like to include within tutorials. I’ve also linked to a separate Archivo Black webfont used in the heading.

/** page structure **/
#w {
  display: block;
  width: 900px;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 15px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}


#topbar {
  display: block;
  height: 80px;
  padding: 0 15px;
  background: #fff;
}

#fullimg {
  display: block;
  width: 100%;
  height: 360px;
  background: url('../images/fullscreen-nintendo-building.jpg') no-repeat;
  background-size: 100%;
}

#content {
  display: block;
  padding: 10px 15px;
}

/** heading bar **/
#logo {
  display: block;
  float: left;
  color: #454545;
  font-size: 3.1em;
  line-height: 80px;
  font-family: 'Archivo Black', Helvetica, sans-serif;
}

#topnav {
  display: block;
  float: right;
}

As you can see the page setup is fairly typical. Special thanks to Jeff Dlouhy for his awesome photo of the Nintendo building, which is centered using the CSS background-size property. Also notice the topbar is fixed at 80px high. You could adjust this in responsive layouts using media queries, but I find it helps to create a fixed height when arranging the search field.

You’ll notice I also setup a fixed height on the search container. This makes it easier when we need to vertically center the input field and the submit button. The search field itself uses an ID #s and it’s setup to run 88% of the full width. You could adjust this number to whatever suits your layout the best.

/** hidden search field **/
#searchbar {
  display: none;
  float: left;
  width: 100%;
  height: 62px;
  border-top: 1px solid #d8d8d8;
  padding-left: 25px;
  padding-right: 10px;
  z-index: 9999;
  background: #fff;
  -webkit-box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
  box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
}

#s {
  display: block;
  width: 88%;
  border: 0;
  outline: none;
  padding: 0;
  height: 60px;
  line-height: 60px;
  font-size: 3.0em;
  font-weight: bold;
  color: #676767;
}

#searchsubmit {
  display: block;
  float: right;
  margin-top: 6px;
  background: none;
  color: #717171;
  border: 0;
  outline: none;
  cursor: pointer;
}

All of these code samples are generally straightforward. The #searchbar div uses a box shadow and a top border to appear “above” the page itself. I’m also using the z-index property to ensure the search field always remains on top.

Animating with jQuery

Along with the up/down toggle effect I’ve also adjusted the search navigation link itself. When a user clicks the magnifying glass icon jQuery switches the original Font Awesome class to be .fa-search-minus. From a user experience standpoint this is fantastic because it helps to distinguish between the search field being hidden or visible.

$(function(){
  var $searchlink = $('#searchtoggl i');
  var $searchbar  = $('#searchbar');
  
  $('#topnav ul li a').on('click', function(e){
    e.preventDefault();
    
    if($(this).attr('id') == 'searchtoggl') {
      if(!$searchbar.is(":visible")) { 
        // if invisible we switch the icon to appear collapsable
        $searchlink.removeClass('fa-search').addClass('fa-search-minus');
      } else {
        // if visible we switch the icon to appear as a toggle
        $searchlink.removeClass('fa-search-minus').addClass('fa-search');
      }
      
      $searchbar.slideToggle(300, function(){
        // callback after search bar animation
      });
    }
  });

My first step is to define variables which target jQuery elements on the page. This will save computing memory when users click the same links over and over again. $searchlink is used to check if we update the minus magnifying glass or go back to the regular icon. $searchbar is used for the animated hide/show toggle effect.

Whenever a user clicks any of the navigation links it runs the e.preventDefault() method. In a working site you should remove this code but for my demo it cleans up the links nicely. Then we’re checking if the currently-clicked link has an ID of #searchtoggl. If not then the script terminates, otherwise we need to check if the field is visible or hidden.

If the search form is invisible, then a click event means the user wishes to display the search field. In this case we update the magnifying glass icon to include a small minus sign – otherwise we change it back to the regular icon. It’s easy to make the search container open and close using a single jQuery method slideToggle().

  $('#searchform').submit(function(e){
    e.preventDefault(); // stop form submission
  });

The very last block of code will stop the search from being submitted. This is accomplished through a .submit() event handler tied onto the form. If your search form actually works then you should remove those last 3 lines of code.

jquery animated toggle search field open source preview

Live DemoDownload Source Code

Closing

Personally I love this effect and it’s a welcome change compared with the other notorious search form designs. This hidden dropdown search box can be implemented to fit any style of website – fluid or fixed or even responsive. All it takes is a little jQuery and some careful CSS positioning. Feel free to download a copy of my source code and apply this design into any of your future projects.





About the author:

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Comments:

Scroll back to the top