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.

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

  1. Dantar says:

    Mission to the Organization of American States (OAS), in partnership with the OAS Secretariat for Integral Development, will launch the $1.5 million “Economically Empowered Women for Equitable and Resilient Societies” project to increase the data and capability of girls to successfully operate in the digital economy, build sustainable livelihoods, and improve their participation in policymaking and leadership in their societies. A lone Republican senator has blocked a congressional vote to create two new Smithsonian museums dedicated to American ladies and Latinos. A museum for Latino history has been being thought of for at the least 20 years, after a government report found in the early nineties that the Smithsonian “shows a sample of wilful neglect” towards Latinos and “nearly totally excludes and ignores Latinos in almost each aspect of its operations”. These websites are nice for appointment single Latinos from different countries. However since the beginning of the pandemic, nations reminiscent of El Salvador have seen a 70 percent rise in reviews of such violence.

    The site is free to make use of, but to communicate it’s important to pay. There’s no must pay for sexy latina ColombiaLady if you entry it for the first time. In case you don’t like rush and choose to be in a relationship for some time earlier than creating a household, a Latin girl is somebody you need, for positive. At this time, there are a lot of skilled intermediaries who, for a price, will make it easier to meet a lady from Latin America. In 2020, there have been 4,443 Latin ladies who bought Ok-1 visas and married US citizens. In spite of everything, you’ll be getting married in Latin, in spite of everything! Maybe not too lengthy, however she will definitely love your want to take pleasure in these moments of getting nearer, gradual getting into every other’s worlds and making a pair. A few true motives can unite Latin brides, but typically, it is a daily wish for love, and the girls give themselves an opportunity to look wider. This girl desires to find a true and hardworking partner who’ll respect the girl’s.

    So many people imagine in it, however it’s not completely true. The second one considers basic strategies to assembly one’s long term partner, they can’t nonetheless come to an understanding it’s mainly increasingly more challenging as of late. Colen (1995, 78) coined the time period ‘stratified social reproduction’ to point that social reproductive labor is ‘differentially skilled, valued and rewarded according to inequalities of entry to materials and social assets in particular historical and cultural contexts’. All you must do is fill up a type which you can entry on their webpage. Girls have demonstrated in cities throughout Latin America for entry to legal and secure abortions, in a region where the procedure is barely totally allowed in a handful of nations. Completely satisfied men declare that since they met a brand new overseas spouse, their lives have qualitatively modified for the better. It is usually higher to be sincere along with your life plans. Use the information we supplied to do the whole lot proper, and who knows, maybe this step will make your life a lot better than ever before. In Latin international locations, it is not uncommon for men to take the lead and make first steps in the direction of approaching a girl.

    Matchmaking agencies scrutinize every Latin girl for marriage before including it to the active brides’ database. What makes Latin women for marriage unique is their life-style and angle towards life. They be happy to speak overtly about their intimate life with buddies, put on short sexy dresses, and emphasize their curvy figures. LatinWomanLove has a world focus with a large person base that makes individuals from any race, country, or culture really feel at dwelling. Basically, these intermediaries work with folks who have already had expertise relationship ladies from this region. All other functions have pricing. As another courting platform, this one has its pricing policy. You possibly can go for a free account or a paid one – which enables you to do extra actions on the positioning. A typical worth for 60 credit is $60, so the more of them you employ, the upper the price of a courting web site. Some other web site with a lifetime guarantee and anti-fraud proper safety is LatinLoveSearch. She knows exactly the way to make your relationship and marriage last perpetually and she is ready to do anything. And be prepared that those mother and father will evaluate you meticulously.

  2. 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.

  3. 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.