Build An Incredible Login Form With jQuery

Build An Incredible Login Form With jQuery

on Aug 19th 2008 with 255 comments
Tutorial Details
  • Technology: jQuery, HTML, CSS
  • Difficulty: Intermediate
  • Completion Time: 2-3 hours

One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we’ll also animate it.


In this tutorial, we’ll create a sliding panel, that slides in to reveal more
content, using JQuery to animate the height of the panel. In this case, we will
be creating a hypothetical login for the new tutsplus area that’s coming soon.

Step 1 – Photoshop Layout

First we need to plan out our layout and make it look cool with Photoshop. Thanks
to Collis, and his amazing Photoshop skills, we have a slick layout to work with.
You can grab the before and after PSD file for further inspection in the source
zip file. But it’s pretty self-evident. It doesn’t have any gradients either, so
we should be able to make this fairly easily just with CSS.

Before width=”600″ height=”400″>

Here you can see what the demo will look like in its normal state.

After width=”600″ height=”400″>

Here is what the demo will look like when the panel is slid down.

Step 2 – Planning the structure

First off, we need to build the page’s structure. To create the layout above,
what do we all need structurally in the HTML?

  • First off, we need a header, that extends across the entire width of the page.
  • We’ll also need a top panel, which for now, we will pretend is permanently expanded
    until we insert the JQuery.
  • We’ll need an area for the normal page content.
  • Finally we’ll need a visual break between the header and page content, which
    we will accomplish through a horizontal ruler (hr).

Alright, so the layout of the page is pretty simple. Here it is:

  1. <div></div>  <!–Header–>
  2. <hr>  <!–Header Stripe–>
  3.   <div>                  <!–Contains the button and panel–>
  4.     <div>                <!–Contains the panel itself–>
  5.       <div> This div will serve as the background of the panel</div>
  6.     </div>
  7.     <div><a>Login Here</a></div>  <!–Will be the button to slide the panel down–>
  8.     <div><a>Hide</a></div>        <!–Toggles to this when the panel is slid down–>
  9.   </div>
  10. </div>
  11. <div>
  12.   All of the Content will go here
  13. </div>

Wow…without classes or any content inside, it looks like a lot of pointless divs,
but all will be necessary for the CSS and JQuery later on. Now we will start adding
classes in preparation for the CSS.

Step 3 – CSS preparation: Classes & ID’s

Now we’ve got to change the skeleton into an actual site with CSS. We’ll
start by adding classes and ID’s to all of those divs! You can do this easily
by printing out the Photoshop layout and then marking up the areas and associated
classes with a sharpie. For this demonstration, I will do the same only in Photoshop.
Although it may be extremely ugly, hopefully it will show you the different regions
of the page.

Areas width=”600″ height=”400″>

Note: I plan on having the normal non-highlighted image on hover.

Here is the page with the added classes and ID’s:

  1. <div id=”header”>
  2. </div>
  3. <hr id=”header_stripe”/>
  4. <div id=”wrapper”>
  5.   <div id=”toppanel”>
  6.     <div id=”panel”>
  7.       <div id=”panel_contents”> </div>
  8.     </div>
  9.     <div class=”panel_button”><a href=”#”>Login Here</a></div>
  10.     <div class=”panel_button”><a href=”#”>Hide</a></div>
  11.   </div>
  12. </div>
  13. <div id=”content”>
  14. </div>

Right now, I’d show you a screenshot of what we have so far, but we don’t
have anything except a horizontal ruler and two unstyled links. You get the idea.
Now we can style the page.

Step 4 – Linking the files together

Before we go any further though, we need to introduce the CSS file to the skeleton.
I created a stylesheet entitled “style.css”. While we’re adding code
to the head, we might as well add the javascript and jQuery as well. Here is the
head of the page:

  1. <head>
  2. <title>Nettuts JQuery Sliding Panel</title>
  3. <style type=”text/css”>
  4. @import url(style.css);
  5. </style>
  6. <script src=”jquery.js” type=”text/javascript”></
  7. <wbr>
  8.     script> <script src=”javascript.js” type=”text/javascript”></<wbr>script>
  9. </head>

Step 5 – Styling the Skeleton: header

Now we have to style that skeleton of divs. Let’s start from the top down. First
we need to style the header as well as the body tag:

  1. body {
  2.     background: #202020;
  3.     text-align: center;
  4.     margin: 0px;
  5. }
  6. #header {
  7.     margin-left: auto;
  8.     margin-right: auto;
  9.     width: 100%;
  10.     height: 135px;
  11.     background: #3f3f3f url(images/header.png) no-repeat center ;
  12.     position: relative;
  13.     border-bottom: 1px solid #4a4a4a;
  14. }

Fortunately, we have no gradients to worry about here. But we do still have a background
image. I also added a 1px border to the bottom of the header for a visual break.

The background image is optional. I liked the Bell Gothic BT font so much, I decided
to make it into an image. Alternatively, you can choose to just style plain text
by adding styling to h1, and h2 tags:

  1. #header h1{
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-weight: bold;
  4. position: relative;
  5. top: 30px;
  6. font-size: 40px;
  7. color: white;
  8. }
  9. #header h2{
  10. font-family: Arial, Helvetica, sans-serif;
  11. font-weight: bold;
  12. font-size: 16px;
  13. color: #7e7e7e;
  14. }

And then modifying the header to this:

  1. <div id=”header”>
  2.   <h1>Sliding Panel</h1>
  3.   <br />
  4.   <h2>jQuery Sliding Panel Demonstration for NETTUTS</h2>
  5. </div>

So now the page should look like this:

You can view step 5 here.

step 5 width=”472″ height=”269″>

Step 6 – Styling the Horizontal Ruler

Although we have the bottom border of the header to visually separate the sections,
we also need a thicker more visual border as well. Since we cannot apply two bottom
borders to the header, we can just stylize the horizontal ruler (hr):

  1. hr#header_stripe{
  2. height: 12px;
  3. position: relative;
  4. top: -7px;
  5. background-color: #191919;
  6. border: none;
  7. color: #191919;
  8. }

We now have a thicker separation to add to the 1px border:

step6 width=”438″ height=”233″>

You can view step 6 here.

Step 7 – Styling the Panel

Now we need to stylize the panel. Until we add the JQuery, we’re going to stylize
the panel like it was expanded. When we’re done with the CSS, we’re going
to animate the height of the panel to zero, and then back to full height; so we
need to make sure that when we change the height, it stays the same.

Here is the CSS code, I’ll explain it afterwards:

  1. #wrapper{
  2.     margin-left: auto;
  3.     margin-right: auto;
  4.     width: 900px;
  5.     text-align: center;
  6. }
  7. #toppanel {
  8.     position: absolute;
  9.     top: 135px;
  10.     width: 900px;
  11.     z-index: 25;
  12.     text-align: center;
  13.     margin-left: auto;
  14.     margin-right: auto;
  15. }
  16. #panel {
  17.     width: 900px;
  18.     position: relative;
  19.     top: 1px;
  20.     height: 400px;
  21.     margin-left: auto;
  22.     margin-right: auto;
  23.     z-index: 10;
  24.     overflow: hidden;
  25.     text-align: left;
  26. }
  27. #panel_contents {
  28.     background: black;
  29.     filter:alpha(opacity=70);
  30.     -moz-opacity:0.70;
  31.     -khtml-opacity: 0.70;
  32.     opacity: 0.70;
  33.     height: 100%;
  34.     width: 904px;
  35.     position: absolute;
  36.     z-index: -1;
  37. }

step7 width=”600″ height=”399″ />

Ok, that’s a lot of code for one box. Well it’s more than that. Try inspecting
it with either Firefox Extension Firebug or Web Developer, and you will see what
all that CSS does.

Check out what Step 7 currently
looks like.

  • First off, we need the panel to be positioned absolute, or else, when expanded,
    it will push all of the content below it, down. So we add a wrapper, which is wrapped
    around everything else, and then centered. If we left the wrapper out, the panel,
    which is positioned absolute, would not be able to be centered as easily.
  • Next, we add the style info for the toppanel as a whole. As you can see, this includes
    the panel buttons.
  • After that, we add the style info for just the panel which is hidden normally. This
    is the box that you see expaned now. I made the height 100%, so that if we increase
    or decrease the height of #toppanel, then the height of the #panel will be the same.
    Also, the overflow is hidden, so that if the height of the #toppanel is lowered,
    it will cut of the content of the panel.
  • If you examine the earlier HTML, you will see the div with the ID of panel_contents.
    This div, although empty, allows us to have the background transparent, while still
    keeping the content inside opaque.

Step 8 – Add content to the Panel

Before we test out the panel, we need to add some content, to see if it hides it
properly. In this example, we are making a login area, so we need to add a form,
and we’re also adding an image to balance it. This step is just to add content
for the demo. It is less important and is more basic, so I will not explain it as
much as everything else. Here is the code:


  1. .border {
  2.     border: 15px #1d1d1d solid;
  3. }
  4. img.border_pic {
  5.     border: 15px #1d1d1d solid;
  6.     position: absolute;
  7.     top: 110px;
  8.     float: left;
  9.     margin-left: 150px;
  10.     width: 250px;
  11.     height: 150px;
  12.     z-index: 30;
  13. }
  14. div#login {
  15.     width: 240px;
  16.     height: 150px;
  17.     position: absolute;
  18.     rightright: 150px;
  19.     top: 110px;
  20.     background: #46392f;
  21.     text-align: left;
  22.     padding-left: 10px;
  23. }
  24. div#login p {
  25.     color: #CCCCCC;
  26.     font-family: Century Gothic, Georgia, “Times New Roman”, Times, serif;
  27.     line-height: 25px;
  28. }
  29. div#login input#password {
  30.     position: relative;
  31.     rightright: -6px;
  32. }
  33. div#login input#login_btn {
  34.     border: 1px #899690 solid;
  35.     cursor: pointer;
  36.     position: relative;
  37.     top: 30px;
  38.     left: 86px;
  39. }


  1. <img class=”border_pic” src=”images/tutsplus.jpg” alt=”Screenshot” />
  2. <div class=”border” id=”login”>
  3.   <p>Username:
  4.     <input type=”text” size=”15″ name=”username” id=”username” />
  5.     <br />
  6.     Password:
  7.     <input type=”password” size=”15″ name=”password” id=”password” />
  8.     <br />
  9.     <input type=”button” accesskey=”l” id=”login_btn” name=”login” value=”Login” />
  10.   </p>
  11. </div>
step8 width=”600″ height=”409″>

Step 8 is available here.

Step 9 – Test out the CSS

We now need to make sure that if we use jQuery to animate the height of the top
panel, it will work smoothly. Now that we have content, we are going to change the
height of #panel to 200 and see what happens:


Wonderful. You can view step 9 here.
Now we’re going to change it to 0:

step9 width=”600″ height=”241″>

Perfect. Now we know that the design will work with JQuery.

Step 10 – Styling the Button

If you examine the finished product, you can see that the button that slides the
panel down, changes once you click it once. This means it toggles. Therefore, we
need two buttons, and we will toggle their visibility. Before we hide one of them,
though, we need to add CSS to them.

If you remember, we added the class “.panel_button” to them. Here is the
style information. I will explain it after:

  1. .panel_button {
  2.     margin-left: auto;
  3.     margin-right: auto;
  4.     position: relative;
  5.     top: 1px;
  6.     width: 173px;
  7.     height: 54px;
  8.     background: url(images/panel_button.png);
  9.     z-index: 20;
  10.     filter:alpha(opacity=70);
  11.     -moz-opacity:0.70;
  12.     -khtml-opacity: 0.70;
  13.     opacity: 0.70;
  14.     cursor: pointer;
  15. }
  16. .panel_button a {
  17.     text-decoration: none;
  18.     color: #545454;
  19.     font-size: 20px;
  20.     font-weight: bold;
  21.     position: relative;
  22.     top: 5px;
  23.     left: 10px;
  24.     font-family: Arial, Helvetica, sans-serif;
  25. }
  26. .panel_button a:hover {
  27. color: #999999;
  28. }
10 width=”414″ height=”247″>

Step 10 Panel Buttons

  • First we center the button using the auto margin technique. Then we position it
    and add a background of the button. We also add all of that styling information
    to accodmodate for all of the different browser’s preferences. And make the
    button seem clickable by making the cursor a pointer, when you hover over it. This
    just improves the usability.
  • We’re also going to wrap the text in a link, to provide an on hover effect,
    as well as positioning.

Step 11 – Button HTML

Now, in preparation for the JQuery, we need to set up the buttons, with their HTML.
First off we’re going to add an image to each button, and position it with CSS,
you’ll see the HTML in a second:

  1. .panel_button img{
  2. position: relative;
  3. top: 10px;
  4. border: none;
  5. }

Now, we also need to hide the Hide button for now. As much as I hate, inline styling,
I think it is just easier to add this CSS inline, so here is the new HTML code for
the buttons, with the images:

  1. <div class=”panel_button” style=”display: visible;”><img src=”images/expand.png”  alt=”expand”/>
  2.   <a href=”#”>Login Here</a>
  3.   </div>
  4. <div class=”panel_button” id=”hide_button” style=”display: none;”><img src=”images/collapse.png” alt=”collapse” />
  5.   <a href=”#”>Hide</a>
  6.   </div>

Ok, so notice, right now, the hide button is hidden with inline styling. This will
be toggled later with jQuery. Notice, I also added an ID to the second button, so
we can target it later easily.

11 width=”381″ height=”313″>

Step 11 Panel Button

Step 12 – Adding the Content

This is a quick, but necessary step, adding content. I wrote one sentence and added
one paragraph of dummy text. I centered it using the auto margin technique, and
colored it a gray color:

  1. #content {
  2.     margin-left: auto;
  3.     margin-right: auto;
  4.     width: 600px;
  5.     position: relative;
  6.     top: 90px;
  7.     text-align: left;
  8.     color: #545454;
  9.     font-family: Arial, Helvetica, sans-serif;
  10.     font-size: 12px;
  11.     padding-bottom: 30px;
  12. }
12 width=”498″ height=”257″>

See the text behind the panel in Step 12.

Step 13 – JQuery Time!

Ok, now for the final part of the tutorial, JQuery! You can grab the latest JQuery
at If you’re just beginning with it, be sure to check out this other
Nettuts tutorial by Jeffrey Way, for great JQuery resources. I’ve already grabbed
a copy from, and have already linked it to the page in Step 4.

Step 14 – Think about what we need

Lets first think about what we need the JQuery to do, before we write the code.

  • We want to activate the animation on ‘div.panel_button’ click.
  • We then want to animate the height of the panel to 400px.
  • We then want to toggle the button.
  • Then we want to activate the reverse animation on ‘div#hide_button’ click.
  • Then we want to animate the height back to 0px

Step 15 – Write the Code

So first we start out by getting the script ready with the following JQuery:

  1. $(document).ready(function() {
  2. });
  3. Now we write the code that goes inside there:
  4. $(document).ready(function() {
  5.     $(“div.panel_button”).click(
  6. <wbr>
  7.         function(){ $(“div#panel”).animate({ height: “400px” }); $(“div.panel_button”).toggle()<wbr>;
  8.             }); $(“div#hide_button”).click(<wbr>function(){
  9.         $(“div#panel”).animate({
  10.             height: “0px”
  11.         });
  12.    });
  13. });
Before width=”600″ height=”300″>

Panel in motion in Step 15.

At first, when you examine the previous code, some of you might wonder why I only
have toggle in the first action. Well, you need to remember that the hide button
also has a class of panel_button. Therefore, when you click the ‘Hide”
button, you are actually applying both actions.

Step 16 – Making the animation look ‘real’

So now it’s looking pretty good, but we can still do more; like making the animation
look better. When animating, it’s usually important to try to imitate real life
as much as possible. In this case, I think of a real life example, like a pull-down
projection screen. Remember when you pull those, you pull it further down then it
will be, then it goes back up a little. In the same way, when you want to put it
back up, you pull it down a little before it goes up very fast.

Let’s try to imitate that:

  1. $(document).ready(function() {
  2.     $(“div.panel_button”).click(
  3. <wbr>
  4.         function(){ $(“div#panel”).animate({ height: “500px” }) .animate({
  5.         height: “400px” }, “fast”); $(“div.panel_button”).toggle()<wbr>;
  6.             }); $(“div#hide_button”).click(<wbr>function(){
  7.         $(“div#panel”).animate({
  8.             height: “0px”
  9.         }, “fast”);
  10.       });
  11. });

Notice that we animate the panel to a height of 500 before going to 400. We also
added a difference of speed like in real life, by making certain parts slower. If
you look at the demo you will see that when you hide the panel, it still goes to
500 first. Again, this is because both buttons have the same class. So really when
you hide the panel, it goes through this process:

  • Animate to 500 and toggle
  • Animate back to 400 fast
  • Animate back to 0 fast

Now we have a working Sliding Panel using JQuery. Hope you found this tutorial to
be useful! If so, please submit it to Digg, StumbleUpon, DZone, etc!

24 comments on “Build An Incredible Login Form With jQuery

  1. I was recommended this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my problem. You’re amazing! Thanks!

  2. What i do not realize is in reality how you’re not actually a lot more well-favored than you may be now. You’re so intelligent. You know therefore significantly with regards to this subject, made me individually consider it from numerous varied angles. Its like men and women aren’t involved unless it’s one thing to do with Girl gaga! Your individual stuffs great. At all times deal with it up!

  3. I wish to express some thanks to the writer just for rescuing me from this circumstance. Just after scouting throughout the world wide web and coming across proposals which are not beneficial, I was thinking my life was done. Being alive devoid of the solutions to the difficulties you have solved by way of the write-up is a critical case, and the kind that might have negatively damaged my entire career if I had not discovered your website. Your own ability and kindness in maneuvering a lot of things was excellent. I don’t know what I would have done if I hadn’t encountered such a point like this. I can at this point look ahead to my future. Thanks very much for this high quality and result oriented guide. I won’t hesitate to recommend your web site to any person who requires support on this subject matter.

  4. Thank you for another fantastic post. Where else could anyone get that type of info in such an ideal way of writing? I have a presentation next week, and I am on the look for such info.

  5. Thank you a bunch for sharing this with all people you really recognise what you are speaking about! Bookmarked. Kindly also talk over with my site =). We can have a link alternate arrangement between us!

  6. Hi there just wanted to give you a quick heads up.
    The text in your article seem to be running off the screen in Internet explorer.
    I’m not sure if this is a format issue or something to do with internet browser compatibility but I thought I’d
    post to let you know. The design and style
    look great though! Hope you get the problem solved soon.

  7. I’m really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you customize it yourself? Either way keep up the excellent quality writing, it is rare to see a great blog like this one today

  8. Hi there, simply changed into alert to your blog via Google, and found that it is really informative. I am going to be careful for brussels. I will appreciate should you proceed this in future. Many other folks will be benefited from your writing. Cheers!

  9. I’m not certain exactly why but this internet site is loading incredibly slow for me. Is anyone else having this issue or is it a difficulty on my finish? I’ll check back later and see if the dilemma nonetheless exists.

  10. Pretty nice post. I just stumbled upon your weblog and wanted to say that
    I have truly enjoyed surfing around your blog posts. After all I’ll be
    subscribing to your feed and I hope you write again very soon!

  11. Having read this I thought it was really enlightening. I appreciate you spending some time and energy to put this content together. I once again find myself spending way too much time both reading and posting comments. But so what, it was still worthwhile!

  12. With havin so much written content do you ever run into any issues
    of plagorism or copyright violation? My website has a lot of completely unique
    content I’ve either written myself or outsourced but it seems a lot of it is popping it up all over the internet without my agreement. Do you know any techniques to help reduce content from being stolen? I’d definitely appreciate it.

  13. hey there and thank you for your info – I have certainly
    picked up anything new from right here. I did however expertise several technical
    points using this site, since I experienced to reload the site lots of times previous to I could get it to load properly.

    I had been wondering if your web hosting is OK? Not that I’m complaining, but sluggish loading instances times will very frequently affect your placement in google and could damage your high quality score if advertising and marketing with Adwords. Well I am adding this RSS to my e-mail and can look out for much more of your respective intriguing content. Make sure you update this again very soon.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s