Twitter-like Sign-in Box

Reveals the sign-in panel when a link on the navigation bar is clicked.

by iamacatperson

HTML

<div id="banner">    
    <a href="#" class="signin">Have an account? Sign in!</a>
    
    <div id="signinbox">
        
        <p>Username:</p>
        <input type="text" value="Username" /><br /><br />
        
        <p>Password:</p>
        <input type="text" value="Password" /><br />
        
        <input type="button" value="Sign In"/>
        
        <p class="forgotpw"><a href="">Forgot your password?</a></p>
        
    </div> 
    
</div>

CSS

#banner {
    position: relative;
    width: 500px;
    background: #006;
    font: 12px Verdana, Geneva, sans-serif;
}

#banner a {
    padding: 10px;    
    color: #FFF;
    display: block;
}

#signinbox {
    background: #2A2A2A;
    width: 250px;
    height: 200px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    position: absolute;
    top: 34px;
    left: 0;
    padding: 10px;
    z-index: 2;                
    display: none;
    color: #FFF;
}

#signinbox input[type='text']{
    border: 1px solid #000;
    padding: 4px;
    width: 200px;
    background: #666;
    color: #FFF;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #666;
}

#signinbox p {
    margin: 7px 0;
}

#signinbox input[type='text']:focus {
    border: 1px solid #3FF;
    background: #EEE;
    color: #000;
}

#signinbox input[type='button']{
    padding: 4px;
    margin-top: 20px;
}

#banner p.forgotpw {
    font-size: 10px;
    color: blue;
    float: right;
    margin: 20px 40px 0 0;
}

JavaScript

$('.signin').toggle(function() {
    $('#signinbox').animate({
        'height': 'show'
    }, 50, "swing");
}, function() {
    $('#signinbox').animate({
        'height': 'hide'
    }, 50, "swing");
});

$('input[type="text"]').focus(function() {
    $(this).val("");
});