Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

Custom CSS3 & jQuery Toggle Search Form: Tutorial

Website search is one of the most commonly-expected features in modern design. Although it can be difficult to build usable search functionality, the interface is often a lot simpler and more compact than you'd expect. Search fields require a single input and a submit button which can be styled, positioned, and formatted in any way you like.

For this tutorial I'll explain how you can build a toggle search form with CSS3 and jQuery. I've provided two distinct methods for the toggle effect: a hover and click event. All of the event handling is managed through jQuery while CSS3 is used to display the hidden search field. You can see a live demo of my final project code below.

Live Demo - Download Source Code

Getting Started

Make a new HTML file with an empty header section. The search field events require a copy of the jQuery library. I'm also including the Font Awesome webfont library to create a scalable magnifying glass icon.

1
2
3
4
5
6
7
8
9
<!doctype html>
 
  Toggleable Search Form - Template Monster Demo
 
 
 
 
 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

I've chosen to include many of the header files externally through a cloud resource CDN JS. You might alternatively choose to download the files and store them locally if that would be easier.

My demo uses a responsive technique to hide the navigation links beyond a certain point. The text is coded with pixel values so it will remain constant throughout various browsers. So the effect is handled within an HTML5 nav element using the ID #topbar.

Each link in the navigation is contained in a regular unordered list. The first list item uses a class .threebar which creates space for the typical hamburger menu icon. It only appears once the browser window has been resized below a certain amount.

After the unordered list I created a div with the ID #searchlink. This contains the magnifying glass icon as well as the dropdown toggle div contents. Both the nav and search elements float opposing each other on either side of the page. This will leave plenty of room as the browser window grows smaller to keep the effect usable.

CSS Design Style

Aside from my typical CSS resets I've written a lengthy set of rules to style the page. First is the navigation setup with all the primary links and the .threebar class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#topbar {
  display: block;
  height: 70px;
  background: #424242;
}
 
.navigation {
  display: block;
  float: left;
}
 
.navigation li { 
  display: block;
  float: left;
}
 
.navigation li a {
  display: block;
  float: left;
  font-size: 1.4em;
  line-height: 70px;
  padding: 0 25px;
  text-decoration: none;
  font-weight: bold;
  color: #c1c1c1;
}
.navigation li a:hover {
  color: #dedede;
}
 
.navigation li.threebar {
  display: none;
  font-size: 1.8em;
}
.navigation li.threebar a { position: relative; padding: 0 30px; }
.navigation li.threebar a:hover {
  padding: 0 30px;
  color: #bababa;
  background: #3a3a3a;
}
 
.searchlink {
  display: block;
  float: right;
  position: relative;
  padding: 0 40px;
  right: 0;
  font-size: 2.4em;
  cursor: pointer;
  height: 70px;
  line-height: 65px;
}
.searchlink:hover, .searchlink.open {
  color: #bababa;
  background: #3a3a3a;
}
 
.searchlink.open &gt; .searchform {
  display: block;
}

Each nav link is floated in a single line on the page. The very first .threebar link is hidden by default using display:none. It will only appear through a media query which becomes active on smaller screens.

You should also notice a set of styles targeting the .searchlink element. This is the outer div which contains the magnifying glass as well as the toggle search box. The form itself is another element which is hidden by default and will only appear once the container gains the .open class through JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/** search field **/
.searchform {
  display: none;
  position: absolute;
  width: 300px;
  height: 50px;
  line-height: 40px;
  top: 70px;
  right: 0;
  padding: 0 15px;
  cursor: default;
  background: #3a3a3a;
}
 
.searchlink.open .searchform {
  display: block;
}
 
#search {
  display: block;
  position: relative;
}
 
#s {
  width: 270px;
  background: #272727;
  padding: 8px 11px;
  border: 0;
  color: #eee;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
 
.sbtn {
  display: block;
  position: absolute;
  right: 5px;
  top: 13px;
  background: none;
  border: none;
  color: #bcbcbc;
  font-size: 0.6em;
  cursor: pointer;
}

Inside the search form there aren't too many surprises. One area worth explaining is the search button which also uses the Font Awesome magnifying glass icon. Since it needs to be positioned in relation to the form field I've added relative positioning onto .searchform.

The button itself is positioned absolutely with updated settings for the border and background.

1
2
3
4
5
6
/** media queries **/
@media screen and (max-width: 515px) {
  .navigation li { display: none; }
  .navigation li.threebar { display: block; }
 
}

Lastly we have this brief set of responsive codes that become active once the browser is resized to 515px or smaller. At this smaller size the search link bumps into the other nav links and the layout starts to break down.

So first I'm hiding every single list item with the display: none property. Then my list item with the .threebar class is displayed in place of these links. Note that this nav menu doesn't actually work, it's just a placeholder to demonstrate how you could build an interface with this same effect.

jQuery Event Handlers

Turn back into the HTML file and open a new block of JavaScript at the bottom of the page. In my example I've written two different event handlers - one for the default hover effect and another for the click event.

There is no right or wrong choice just differences of opinion, so play around and see what you like the most.

1
2
3
4
5
6
7
8
9
$(function() {
  var $searchlink = $('#searchlink');
 
  // hover effect
  $searchlink.on('mouseover', function(){
    $(this).addClass('open');
  }).on('mouseout', function(){
    $(this).removeClass('open');
  });

This first line creates a selector variable which can be used as a cached element. $searchlink targets the search container and will be used in either of the jQuery calls. My initial event handler uses the .on() method for mouseover and mouseout events.

Inside each respective function I'm adding or removing the .open class onto the primary search container. Remember, this class regulates when to hide or display the search field. The entire effect is managed through this lone CSS class.

Moving further down in my code is a somewhat larger block for the click event. I have it commented out because we can't use both click and hover effects on the same page. But if you want to try it out simply hide the mouseover code before removing the comment tag.

1
2
3
4
5
6
7
8
9
10
11
  $searchlink.on('click', function(e){
    var target = e ? e.target : window.event.srcElement;
 
    if($(target).attr('id') == 'searchlink') {
      if($(this).hasClass('open')) {
        $(this).removeClass('open');
      } else {
        $(this).addClass('open');
      }
    }
  });
[related_posts]

This method targets the same $searchlink element but instead listens for any click event. Once the function runs it'll create a new variable named target. This checks the event itself to see which element was clicked. It helps us recognize when to close the search form(and when not to close it).

This whole click event is predicated around checking the currently-clicked element. If it has an ID of #searchlink then we know the user has clicked onto the search link div. Otherwise they've clicked elsewhere, such as the search input field or the search button.

You may not need to use this event syntax again but it's worth keeping this snippet handy just in case. JavaScript is a versatile language once you understand how it all operates. Just remember the hover & click events shouldn't be running at the same time, so be sure to either comment out or completely remove one of them.

Closing

There's a lot of power to glean from everyday rudimentary jQuery and CSS techniques. I hope this search bar tutorial can be of use to frontend developers and designers on any type of project. Feel free to download a copy of my source code and let us know your thoughts in the post discussion area.


Jake Rocheleau

First it was design, then writing, and now affiliate marketing. Over a period of 6-7 years he wrote a lot of content for many websites. You can reach Jake on Twitter.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

3 responses to “Custom CSS3 & jQuery Toggle Search Form: Tutorial”

  1. Kleifgenynf says:

    Emilia Clarke quotations

    6th June 2016Quote: “I’m proud to mention I’ve never had braces; My top teeth are just not surprisingly straight, Game Of Thrones star Emilia Clarke names her favourite part of the body.

    31st can 2016Quote: “I have an excessive amount of unrealised dreams. I waiting to play Jane Bond and my ultimate leading man would be Leonardo DiCaprio, bet on Thrones star Emilia Clarke on her career goals.

    5th April 2016Quote: “A disadvantage (of being famous) Is you have strangers supplying love life advice like, ‘I’m a big fan while using show, And I’m not sure what you are doing with that guy’, Which i did not react well to. That happened in big apple when Seth (MACFarlane) And I were properly. This guy begun to give me advice, Game Of Thrones beauty Emilia Clarke does not welcome dating advice from strangers. The British actress briefly romanced a family Guy creator in 2012, nevertheless they split in 2013.

    20th september 2015Quote: “It’s always been funny seeing Kit, thanks to the fact he’s so recognisable. We traveled to a FKA Twigs gig and it was mental. I went to the loo and in the cubicle on both sides the girls were like, ‘That’s Jon Snow on the! have no idea who that random girl is.'” Natural brunette Emilia Clarke, Who plays platinum eagle blonde Daenerys Targaryen in GAME OF THRONES, Reveals she isn’t getting recognised while socialising with co star and fan favourite Kit Harington.

    1st July 2015Fact: The first Terminator film hit the hd two years before the film franchise’s new Sarah Conner, Emilia Clarke, appeared in 1986.

    12th will certainly 2015Quote: “I was at a senior Globes after party and Channing fking Tatum came up to me, And his spectacular missus, Jenna Dewan. And the trainer told us, ‘We call each other moon of my life and my sun and stars’ and all that. i’m like, ‘I cannot feature this. choose, Can all of us have something sexual together? You’re both enjoyable. just a hug’, Emilia Clarke was stunned to see Channing Tatum and his wife are huge Game of Thrones fans.

    25th March 2015Quote: “I’d done nudity before and was involved with being labelled for doing it again, Game Of Thrones star Emilia Clarke on why she passed on the role of Anastasia Steele in Fifty Shades of Grey after meeting with director Sam Taylor Johnson.

    10th April 2014Quote: “vocalization, i would like as many children as I can pop out, I think. You derive from a happy family; You are thinking about creating a happy family. And in a similar breath, i’d like to be on stage at England’s National Theatre, performing (Arthur) miller and (Anton) Chekhov. Give me a Sam Mendes/Tennessee Williams combination that would be glorious. And to be making some incredible movies with (Martin) Scorsese. I’m always come across the hard road. in which, You remain interested and fun. hopefully, Game Of Thrones star Emilia Clarke looks forward to what both her personal and personal future might hold.

    20th March 2014Quote: “It’s my charmdate.com real halloween attire, i think I was dreaming. I got an email from a terrific HBO publicist saying, ‘Madonna would wish to borrow the costume, truth that Ok?or,–” Actress Emilia Clarke reveals the Daenerys Targaryen costume Madonna dressed up in to celebrate Purim over the weekend (15 16Mar14) Was one she in point of fact wore on Game Of Thrones.

    19th March 2014Quote: “It’s insane. i thought overall I was asleep, i assumed I was dreaming, I thought someone was using the ps. It’s a huge time and, really, She it appears to be good, Game Of Thrones star Emilia Clarke was honoured when Madonna chose to be her character Daernerys Targaryen for the Jewish holiday of Purim on Saturday (15Mar14). Madonna posted the shot of her in outfit online.

    6th March 2014Quote: “The aftermath was the thing that was harder to deal with. going into to do my first press junket, it really is a hell of a lot scarier than being naked up on Tv, Game Of Thrones star Emilia Clarke on just the thing that’s more frightening than baring all on camera.

  2. Riyaz says:

    Thank you, Jake.

    The design of search bar is awesome!. I love it.

    Inserted on my friend’s website and it’s working great.

Leave a Reply

Your email address will not be published. Required fields are marked *