Build an Incredible Login Form With jQuery

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.

width="600" height="400">

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

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:

<div></div>  <!--Header-->

<hr>  <!--Header Stripe-->


  <div>                  <!--Contains the button and panel-->
    <div>                <!--Contains the panel itself-->

      <div> This div will serve as the background of the panel</div>
    
    </div>
    <div><a>Login Here</a></div>  <!--Will be the button to slide the panel down-->

    <div><a>Hide</a></div>        <!--Toggles to this when the panel is slid down-->
  </div>
</div>


<div>

  All of the Content will go here
</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.

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:

<div id="header">
</div>

<hr id="header_stripe"/>

<div id="wrapper">
  <div id="toppanel">

    <div id="panel">
      <div id="panel_contents"> </div>
    </div>
    <div class="panel_button"><a href="#">Login Here</a></div>

    <div class="panel_button"><a href="#">Hide</a></div>
  </div>
</div>
<div id="content">

</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:

<head>
<title>Nettuts JQuery Sliding Panel</title>
<style type="text/css">
@import url(style.css);
</style>
<script src="jquery.js" type="text/javascript"></
<wbr>
    script> <script src="javascript.js" type="text/javascript"></<wbr>script>
</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:

body {
    background: #202020;
    text-align: center;
    margin: 0px;
}

#header {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 135px;
    background: #3f3f3f url(images/header.png) no-repeat center ;
    position: relative;
    border-bottom: 1px solid #4a4a4a;
}

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:

#header h1{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
position: relative;
top: 30px;
font-size: 40px;
color: white;
}

#header h2{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #7e7e7e;
}

And then modifying the header to this:

<div id="header">

  <h1>Sliding Panel</h1>
  <br />
  <h2>jQuery Sliding Panel Demonstration for NETTUTS</h2>
</div>

So now the page should look like this:

You can view step 5 here.

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):

hr#header_stripe{
height: 12px;
position: relative;
top: -7px;
background-color: #191919;
border: none;
color: #191919;

}

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

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:

#wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    text-align: center;
}
#toppanel {
    position: absolute;
    top: 135px;
    width: 900px;
    z-index: 25;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#panel {
    width: 900px;
    position: relative;
    top: 1px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    overflow: hidden;
    text-align: left;
}
#panel_contents {
    background: black;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    height: 100%;
    width: 904px;
    position: absolute;
    z-index: -1;
}

step7 step7 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:

CSS:

.border {
    border: 15px #1d1d1d solid;
}

img.border_pic {
    border: 15px #1d1d1d solid;
    position: absolute;
    top: 110px;
    float: left;
    margin-left: 150px;
    width: 250px;
    height: 150px;
    z-index: 30;
}
div#login {
    width: 240px;
    height: 150px;
    position: absolute;
    right: 150px;
    top: 110px;
    background: #46392f;
    text-align: left;
    padding-left: 10px;
}
div#login p {
    color: #CCCCCC;
    font-family: Century Gothic, Georgia, "Times New Roman", Times, serif;
    line-height: 25px;
}
div#login input#password {
    position: relative;
    right: -6px;
}
div#login input#login_btn {
    border: 1px #899690 solid;
    cursor: pointer;
    position: relative;
    top: 30px;
    left: 86px;
}

HTML:

      <img class="border_pic" src="images/tutsplus.jpg" alt="Screenshot" />
      <div class="border" id="login">

        <p>Username:
          <input type="text" size="15" name="username" id="username" />

          <br />
          Password:
          <input type="password" size="15" name="password" id="password" />

          <br />
          <input type="button" accesskey="l" id="login_btn" name="login" value="Login" />

        </p>
      </div>

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:

height="269">

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

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:

.panel_button {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 1px;
    width: 173px;
    height: 54px;
    background: url(images/panel_button.png);
    z-index: 20;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    cursor: pointer;
}
.panel_button a {
    text-decoration: none;
    color: #545454;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: 5px;
    left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
color: #999999;
}

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:

.panel_button img{
position: relative;   
top: 10px;
border: none;
}

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:

    <div class="panel_button" style="display: visible;"><img src="images/expand.png"  alt="expand"/>
      <a href="#">Login Here</a>

      </div>
    <div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" />

      <a href="#">Hide</a>
      </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.

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:

#content {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    position: relative;
    top: 90px;
    text-align: left;
    color: #545454;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-bottom: 30px;
}

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 jQuery.com. 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 JQuery.com, 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:

$(document).ready(function() {
});

Now we write the code that goes inside there:

$(document).ready(function() {
    $("div.panel_button").click(
<wbr>
        function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()<wbr>;
            }); $("div#hide_button").click(<wbr>function(){
        $("div#panel").animate({
            height: "0px"
        });
   });       
});

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:

$(document).ready(function() {
    $("div.panel_button").click(
<wbr>
        function(){ $("div#panel").animate({ height: "500px" }) .animate({
        height: "400px" }, "fast"); $("div.panel_button").toggle()<wbr>;
            }); $("div#hide_button").click(<wbr>function(){
        $("div#panel").animate({
            height: "0px"

        }, "fast"); 
      });       
});

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!