In this post I want to explain "Twitter like login hide and show effect with jquery and CSS ". Very simple just five line of code using jquery hide() and show() events and little CSS code, use it and enrich your web projects. Take a look at live demo.
Twitter API: Up and Running: Learn How to Build Applications with the Twitter API
Download Script 
Live DemoJavascript Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".sign_in").click(function()
{
$("#sign_box").show();
return false;
});
$("body #main").click(function()
{
$("#sign_box").hide();
return false;
});
});
</script>
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".sign_in").click(function()
{
$("#sign_box").show();
return false;
});
$("body #main").click(function()
{
$("#sign_box").hide();
return false;
});
});
</script>
HTML Code
$('.sign_in').click(function(){} - sign_in is the class name of anchor 'Sign In'. Using show() event displaying the id="sign_box".
<div><a href="#" class="sign_in">Sign In</a></div>
<div id="sign_box">
<form method="post" action="">
<label>UserName
<input type="text" name="usr"/></label>
<label>Password
<input type='password' name="pwd"/></label>
<input type="submit" value=" Sing In "/>
</form></div>
<div id='main'><h1>9lessons.blogspot.com</h2></div>
<div id="sign_box">
<form method="post" action="">
<label>UserName
<input type="text" name="usr"/></label>
<label>Password
<input type='password' name="pwd"/></label>
<input type="submit" value=" Sing In "/>
</form></div>
<div id='main'><h1>9lessons.blogspot.com</h2></div>
CSS code
Contains CSS code just find out position:absolute
#sign_box
{
width:170px;
background-color:#fff;
border:solid 1px #5ea0c1;
padding:8px;
position:absolute;
display:none;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
}
.sign_in
{
background-color:#FFFFFF;
border:solid 1px #5ea0c1;
padding:6px;
}
#main
{
height:500px;
}
{
width:170px;
background-color:#fff;
border:solid 1px #5ea0c1;
padding:8px;
position:absolute;
display:none;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
}
.sign_in
{
background-color:#FFFFFF;
border:solid 1px #5ea0c1;
padding:6px;
}
#main
{
height:500px;
}
thanks for sharing this tut:)
You know what would be nice, to hide login menu with click on Signin text ;)
Hey Sory, i m noob but wat these code do?
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
@ankit
Code for round corners - topright, bottomleft, bottomright
Here's some quick feedback:
Please don't leave the for attribute off of your label tags. You're hurting the Internet every time you do.
Also, writing your code so that clicking on "sign in" with JavaScript disabled would take you to an independent login URL would also be wonderful.
Twitter's sign in drop down does both of these things, by the way.
Great good one. Keep blogging.
Hi, feedbacking:
make this, to have use of label tag
[label]Password [input type='password' name="pwd"/][/label]
Well, nothing is click-able inside the #sign_box - Any idea?
@junal
I did little code modification.
if you like to close the box clicking back on Sign In link, you can use the toggle fuction for jquery.
I modified the click event on sign_in from show to toggle... so that clicking sign_in toggles sign_box.
Cheers.
I've tried to click the 9lessons.blogspot.com link and it doesn't work because of the close event (i think)! Any suggestions on this?
Hi friend,
thanks to accept the modification in the code.
Now tell me, why is jQuery needed here?
Simple and effective solution :) Super.. I used more advanced solution found at http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/ but I belive yours simpler to use :) I used this with Drupal at http://jkvandra.ee
What if you need to do have people login securely via HTTPS?
@Bob MacNeal or @shrinivas
I would like to close the box clicking back on Sign In link. Could you please tell me how can i do that?
hell yeah!
plzzz.... post the codes for hiding the box also...thank u;
Ultimate mate.......
Here is the code for closing the box when you click on Sign in:
$(".sign_in").click(function(){
if ($("#sign_box:visible").length != 0){
$("#sign_box").hide();
}
else {
$("#sign_box").show();
}
return false;
}