Twitter like Login with Jquery and CSS ...

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.

Download Script     Live Demo

Javascript 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").click(function()
{
$("#sign_box").hide();
return false;
});
$("body #sign_box").click(function()
{
$("#sign_box").show();
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</label>
<input type="text" name="usr"/><br />
<label>Password</label>
<input type=password name="pwd"/><br />
<input type="submit" value=" Sing In "/>
</form></div>
<div><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;
}

 Original Source:
http://9lessons.blogspot.com/2009/12/twitter-like-login-with-jquery-and-css.html