» » Use CSS3 and jQuery to create scalable search bar

 

Use CSS3 and jQuery to create scalable search bar

Author: bamboo06 on 18-11-2014, 00:38, views: 1815

12
Search bar on our website is essential, especially in the limited page space, placing a major search bar is a problem, and today I'm going to tell you about with examples of how to use CSS3 and jQuery to implement a scalable functionality search bar.

In the example, we only show a search button, when you click the search button, sliding from right to left input box to start entering the search, click the search button jumps to the search results page, the search input box away.
HTML
Placed in the search bar to be placed in the following html code pages, search bar #search_bar contains a form # myform form, the form to place a search box #search, a search button and search button icons .search_btn .search_ico.
  <div class="demo">
  		<div id="search_bar" class="search_bar">
			<form id="myform">
				<input class="input" placeholder="What do you want to search..." type="text" name="key" id="search">
				<input class="search_btn" type="submit" value="">
				<span class="search_ico"></span>
			</form>
		</div>
        <div id="show">Welcome to come to GOOCODE.NET.<br/>Click the right search button to have a look--></div>
  </div>

CSS
We used to beautify the entire search bar layout by CSS, which we use CSS3 code.
.search_bar{position: relative;margin-top: 10px; 
    width: 0%;min-width: 60px;height: 60px; 
    float: right;overflow: hidden; 
    -webkit-transition: width 0.3s; 
    -moz-transition: width 0.3s; 
    transition: width 0.3s; 
    -webkit-backface-visibility: hidden; 
    background:#162934; 
} 
 
.input{ 
    position: absolute;top: 0;right: 0; 
    border: none;outline: none; 
    width: 98%;height: 60px; line-height:60px;z-index: 10; 
    font-size: 20px;color: #f9f9f9;background:transparent 
} 
 
.search_ico,.search_btn  { 
    width: 60px;height: 60px;display: block; 
    position: absolute;right: 0;top: 0; 
    padding: 0;margin: 0;line-height: 60px;cursor: pointer; 
} 
 
.search_ico{background: #e67e22 url(icon.png) no-repeat 18px 20px;z-index:90;} 
.search_open{width: 100% !important; z-index:1002} 
#show{position:absolute; padding:20px} 

The code is a key transition: width 0.3s; you can animate the CSS3, width from 0 becomes 100%, we can look to the specific CSS3 manuals, but here much description, you can copy and modify the code apply to your project.
jQuery
When you click on the search button, the search bar .search_bar by toggleClass () to switch styles .search_open, which implements the search bar contraction and extension functions. In addition, we also need to determine the input case, when the input condition is satisfied, Submit search form to realize the search function, see the code:
$(function(){ 
    $(".search_ico").click(function(){ 
        $(".search_bar").toggleClass('search_open'); 
        var keys = $("#search").val(); 
        if(keys.length>2){ 
            $("#search").val(''); 
            $("#myform").submit(); 
        }else{ 
            return false; 
        } 
    }); 
}); 

This effect can be applied to the mobile terminal project, of course, you can also manually add slide effect.

Category: Javascript / CSS

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
13 October 2017 02:52

Darnisha

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Rita’s Pizza is the best pizza in the town and I totally love it. As a Teacher, You Need to Appreciate Your Work. Here’s write my essay service and my own town pizza is the best. I think that people should appreciate it.

<
  • 0 Comments
  • 0 Articles
19 October 2017 18:29

david

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Now, I am so happy you have told us this information here. I needed this to creat VR Headset Galaxy S3 search bar and now, I'll do that.

<
  • 0 Comments
  • 0 Articles
19 October 2017 22:16

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
In this article understand the most important thing, the item will give you a keyword rich link a great useful website page: The Ex Factor Guide

<
  • 0 Comments
  • 0 Articles
2 November 2017 01:40

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
wow this saintly however ,I love your enter plus nice pics might be part personss negative love being defrent mind total poeple , Deep Questions

<
  • 0 Comments
  • 0 Articles
2 November 2017 06:07

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I propose merely very good along with reputable data, consequently visualize it: Questions to ask a girl

<
  • 0 Comments
  • 0 Articles
5 November 2017 03:06

frank

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is a decent post. This post gives really quality data. I'm certainly going to investigate it. Truly extremely helpful tips are given here. Much thanks to you to such an extent. Keep up the acts of kindness. 1800truckwreck.com

<
  • 0 Comments
  • 0 Articles
1 January 2018 12:57

ALISE

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Astrologie, boule de cristal, cartomancie, chiromancie, numérologie, pendule, tarot ou oracle... voyance telephone

<
  • 0 Comments
  • 0 Articles
1 January 2018 21:05

ALISE

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I am confident they will be benefited from this site.Best wedding Photographer

<
  • 0 Comments
  • 0 Articles
2 January 2018 12:52

ALISE

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I definately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog! oet speaking

<
  • 0 Comments
  • 0 Articles
4 January 2018 12:52

ALISE

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Use a clear subject that describes what your message is about.satta matka

<
  • 0 Comments
  • 0 Articles
4 January 2018 15:35

ALISE

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Nous n'y voyons pas toujours clair dans le tumulte de nos sentiments et de nos émotions.satta matka

<
  • 0 Comments
  • 0 Articles
5 January 2018 13:10

ALISE

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi there, I found your blog via Google while searching for such kinda informative post and your post looks very interesting for me.Banned Aid

Information
Comment on the news site is possible only within (days) days from the date of publication.