Nice login

nice Small footprint login form

by ecartdk

HTML

<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

#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; }

#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;
   ...

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();
        }
    });
});