Hidden Dropdown Search Form Using jQuery
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:
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.
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.
Related Article: How to Create an Epic Scene of Alien Invasion in Photoshop
Please visit my portfolio website: www.jojitdelapena.com
Hidden Dropdown Search Form Using jQuery
![]()
Reviewed by admin
on
11:17:00 AM
Rating:
Unknown
We at Graphic Design Tips Online respects the intellectual property of others. We do not own any of the Graphics, Tutorials and Video embed contents. All live and recorded channels or videos, Graphics and Tutorials posted on this website were hosted on third party streaming service and websites available freely on the internet.
No comments: