Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery. It’s really easy, it’ll help you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. This entry will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tooltips. Enjoy it!

It always has a demo and download at the beginning of my post.

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:

<divid="container">
  <divid="topnav"class="topnav"> Have an account? <ahref="login"class="signin"><span>Sign in</span></a> </div>
  <fieldsetid="signin_menu">
    <formmethod="post"id="signin"action="https://twitter.com/sessions">
      <labelfor="username">Username or email</label>
      <inputid="username"name="username"value=""title="username"tabindex="4"type="text">
      </p>
      <p>
        <labelfor="password">Password</label>
        <inputid="password"name="password"value=""title="password"tabindex="5"type="password">
      </p>
      <pclass="remember">
        <inputid="signin_submit"value="Sign in"tabindex="6"type="submit">
        <inputid="remember"name="remember_me"value="1"tabindex="7"type="checkbox">
        <labelfor="remember">Remember me</label>
      </p>
      <pclass="forgot"> <ahref="#"id="resend_password_link">Forgot your password?</a> </p>
      <pclass="forgot-username"> <Aid=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.

[smartads]

Another event in this code is the event when users click outside the Login Form, the Form will be hided. In another hand, it removes the class name “menu-open” out of the link “.signin” to return the original background image of that link.

What’s about the Tooltips?

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

 <script type='text/javascript'>
  $(function() {
   $('#forgot_username_link').tipsy({gravity: 'w'});
  });
 </script>

I’m using the tipsy plugin of jQuery. The content inside tooltip base on the “title” attribute of the link. You can change the position of the tooltip by East, West, South, North as easy as change the value of “gravity” on the code above. I would like to forward you a link to the homepage of this plugin, so that you can learn more how to use this tooltip. See more ..

Conclusion:

If you download the completed source code from my post, please dont change the structure of folders. If changed, the code will not work.  This code is just an example how to create the dropdown and the tooltip with jQuery. If you gonna say to me like this below, please read it firt.

IE6: Hi man! Me: What's up, bro? IE6: You almost forget me,man. I can not display correctly the css above. It doesn't work, man!
Me: I'm sorry man, but you're outdated man. Get out of my way before i kick your ass man!

Solid web hosting for web developers – code, build and host your website on a reliable solution for maximum performance.