Perfect signin dropdown box likes Twitter with jQuery

HTML Code

At first, begin with the HTML code. HTML is very simple and contains a link button <a>
tag, comes together with <fieldset> tag to display the form.

Copy and paste the following code in a new html page:

<div id="container">
<div id="topnav" class="topnav"> Have an account? <a href="login"
class="signin"><span>Sign in</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin"
action="https://twitter.com/sessions">
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username"
tabindex="4" type="text">
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" value="" title="password"
tabindex="5" type="password">
</p>
<p class="remember">
<input id="signin_submit" value="Sign in" tabindex="6"
type="submit">
<input id="remember" name="remember_me" value="1" tabindex="7"
type="checkbox">
<label for="remember">Remember me</label>
</p>
<p class="forgot"> <a href="#" id="resend_password_link">Forgot
your password?</a> </p>
<p class="forgot-username"> <A id=forgot_username_link
title="If you remember your password, try logging in with your email"
href="#">Forgot your username?</A> </p>
</form>
</fieldset>
</div>

CSS Code

You need to use css to define the Sign In button and and the Login Form. The following
codes code below is used to do that.

Copy and paste the following code to your css file or add it into your HTML page where
you define the styles, these codes below define the Sign In button.

#container {
    width:780px;
    margin:0 auto;
    position: relative;
}

#content {
    width:520px;
    min-height:500px;
}
a:link, a:visited {
    color:#27b;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a img {
    border-width:0;
}
#topnav {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
}
#topnav a.signin {
    background:#88bbd4;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url("images/signin-nav-bg-ie.png") no-repeat
0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin:hover {
    background:#59B;
    *background:transparent url("images/signin-nav-bg-hover-ie.png") no-
repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
    *background-position:0 3px!important;
}

a.signin {
    position:relative;
    margin-left:3px;
}
a.signin span {
    background-image:url("images/toggle_down_light.png");
    background-repeat:no-repeat;
    background-position:100% 50%;
    padding:4px 16px 6px 0;
}
#topnav a.menu-open {
    background:#ddeef6!important;
    color:#666!important;
    outline:none;
}
#small_signup {
    display:inline;
    float:none;
    line-height:23px;
    margin:25px 0 0;
    width:170px;
}
a.signin.menu-open span {
    background-image:url("images/toggle_up_dark.png");
    color:#789;
}

And the CSS codes below defines the Login Form:

#signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
    background-color:#ddeef6;
    position:absolute;
    width:210px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    padding:12px;
    top: 24.5px;
    right: 0px;
    margin-top:5px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#789;
    font-size:11px;
}

#signin_menu input[type=text], #signin_menu input[type=password] {

    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #ACE;
    font-size:13px;
    margin:0 0 5px;
    padding:5px;
    width:203px;
}
#signin_menu p {
    margin:0;
}
#signin_menu a {
    color:#6AC;
}
#signin_menu label {
    font-weight:normal;
}
#signin_menu p.remember {
    padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
    clear:both;
    margin:5px 0;
}
#signin_menu p a {
    color:#27B!important;
}
#signin_submit {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
    border:1px solid #39D;
    color:#fff;
    text-shadow:0 -1px 0 #39d;
    padding:4px 10px 5px;
    font-size:11px;
    margin:0 5px 0 0;
    font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
    background-position:0 -5px;
    cursor:pointer;
}

It’s time to work with Javascript

Surprisedly, the HTML and CSS codes seem to be complicated, but the Javascript is so
simple. Simply copy and paste these Javascript code below to show/hide when users click
on the Sign In button, even when click outside the Login Form.

<script src="javascripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});

$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
 if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});

});
</script>

As the codes above, when users click on the Sign In button, it’ll call a new function. At
first, the Login Form (under the <filedset> tag) will be showed, then the link with class
name “.signin” will be added one more class name “menu-open” to change the
background image.