How To Make Twitter Like Sign In Box

In this simple tutorial I explain how to make a simple twitter like sign in box. All we need is some jQuery knowledge and a jQuery plugin called jquery.corner in order to make the boxes rounded corner.

Here is the path we should follow:

• Create a div and make its id as "loginBox".
• Create a sub div and put the login box content and make its id as "loginBoxContent".
• Add some style.
• Code the jQuery part.

So let's begin with the HTML:

<div id="loginBox">Login </div>

<div id="loginBoxContent">
<form method="post" action="login">
<div>Username or e-mail:</div>
<div><input type="text" name="login" /></div>
<div>Password:</div>
<div><input type="password" name="password" /></div>
<div><input type="submit" value="Login"></div>
</form>
</div>

With this simple piece of code we have created two divs with the ids loginBox and loginBoxContent. After that we have added some content to the loginBoxContent container.

The next part is adding some style to the page so here is the simple css.

<style>
body
{
  background: #F9F7ED;
  font-family: Sans-serif;
  margin: 0;
}
#loginBox
{
    margin-left: 650px;
    background: #2088B2;
    padding: 5px;
    color: #fff;
    width: 50px;
    margin-top: 3px;
    cursor: pointer;
}
#loginBoxContent
{
    background: #4AC0F2;
    padding: 5px;
    display: none;
    font-size: 12px;
    width: 180px;}
p { padding-bottom: 1px;}
</style>

I'm sorry for this poor styling since I am a web developer not a designer, I really suck at designing. Now that we have completed the first 3 steps successfully, the only part left is coding some jQuery.

What we are going to do?

We are just going to add a click event to the #loginBox and make some style changes and positioning on the #loginBoxContent. In the meanwhile we will also check if the #loginBoxContent is already open or not so we can obtain the action that should be done. Here you can see the jQuery part.

<script type="text/javascript">
$(document).ready(function() {
    $("div[id^='loginBox']").corner("5px");
    $("#loginBox").click(function() {
        if ($("#loginBoxContent").css('display') == 'block') {
            $("#loginBoxContent").css('display', 'none');
            $("#loginBox").css('background', '#2088B2').corner("5px");
        }
        else {
            var offset = $(this).offset();
            $("#loginBoxContent").css({
                'left': offset.left-130, 'top': offset.top+25,
                'position':'absolute', 'display': 'block'}).uncorner().corner("tl bl br");
            $(this).css('background', '#4AC0F2').corner("tl tr");
        }
    });
});
</script>

And that is all! Your Twitter like login box is ready! Check out the demo and enjoy!