sendesignz

How to Implement Toggle Search Box in jQuery


There are lots of toggle tutorial already in the web. Most of the people are using toggle effect on their websites. But they are using the effect for login form or contact form. They usually look good. I think it is also best match to implement in search box too. Toggle search box also gives an extra room on the page. Today I will show how to implement search box using jQuery toggle effect and CSS3.

1. Vertical search box

See the demo

HTML

 <div id="search"></div> <div class="text"> <input type="text" style="border:#FFF;"/> </div> <div id="inner"> <span style="position:absolute; padding:8px 25px;">Search</span> </div> 

CSS

 body{ background-color:#999; color:#FFF; font-family:Verdana, Geneva, sans-serif; font-size:11px; margin:0; } 

 .text { float:right; position:relative; width:160px; background-color:#FFF; height:30px; } 

 

 #search{ border-width:15px 5px 15px 10px; border-style:solid; border-color: #333 #333 #333 #CCC; position:relative; float:right; cursor:pointer; } 

Above CSS is for Arrow. If you need to get more about border-width and border-color propery please visit my previous tutorilal How to Draw Speech Bubble and Shapes with CSS3.

 

 

 

 #inner { font-weight: bold; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-radius-bottomleft: 5px; text-shadow: 0 -1px 1px #00090d; width: 100px; background-color:#333; cursor: pointer; float:right; height:30px; text-align:center; position:relative; }

 

border-radius-topleft property make your topleft corner rounded and border-radius-bottomleft make youe bottomleft corener rounded.  text-shadow propery make your text drop shadow.

Related tutorial

CSS3 Exciting Shadows

CSS3 Exciting Border Functions and Features

jQuery

We will start loading in the necessary libraries and external files in the head. I have placed jQuery Library into the “js” folder.

Then I created a javascript file call  "animated-menu.js", and put into “js” folder. All of our jQuery code will go into this javascript file.

Download jquery-1.4.4.min.js

HTML

 <head> <title>Search</title> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="js/animated-menu.js" type="text/javascript"></script> <link href="style/style.css" rel="stylesheet" type="text/css" /> </head> 

 

 

Inside the animated-menu.js add the following code.

 $(document).ready(function(){ $(".text").hide(); $("#inner").click(function(){ $(".text").animate({width: 'toggle'}); }); }); 

 

2. Horizontal Search Box


See the demo

HTML

 <div id="inner"> <span style="position:absolute; padding:8px 25px;">Search</span> </div> <div id="search"></div> <div class="text"> <input type="text" style="border:#333; width:280px; margin-left:10px; margin-top:5px;"/> </div> 

CSS

 body{ background-color:#999; color:#FFF; font-family:Verdana, Geneva, sans-serif; font-size:11px; margin:0; }   #search{ height:30px; background-color:#333; cursor:pointer; } .text { float:right; position:relative; width:300px; background-color:#333; height:30px; margin-right:30px; } 

HTML

 <head> <title>Search</title> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="js/animated-menu.js" type="text/javascript"></script> <link href="style/style.css" rel="stylesheet" type="text/css" /> </head> 

Inside the animated-menu.js add the following code.
 

 $(document).ready(function(){ $(".text").hide(); $("#inner").click(function(){ $(".text").slideToggle(); }); }); 

Leave your comments

Post comment as a guest

0
terms and condition.
  • No comments found