Top Panel With jQuery

Build An Incredible Login Form With jQuery

Connor Zwick on Aug 19th 2008 with 249 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:

    <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.

    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:

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

    script> <script src="javascript.js" type="text/javascript"></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.

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

    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:

    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:

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

    height="269">

    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:

    .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;
}
    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:

    .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.

    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:

    #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;
}
    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 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(

        function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle();
            }); $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        });
   });
});
    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:

    $(document).ready(function() {
    $("div.panel_button").click(

        function(){ $("div#panel").animate({ height: "500px" }) .animate({
        height: "400px" }, "fast"); $("div.panel_button").toggle();
            }); $("div#hide_button").click(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!

     
    Enjoyed this Post?

    Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

    By Connor Zwick

    Rollover to read this author's bio or click through to see a full list of posts by this author.

    Hi, I'm Connor Zwick-freelance blogger and designer. I love learning and teaching new topics in areas like HTML, CSS, PHP, Ruby on Rails, and last but certainly not least, jQuery. You can follow me on twitter or visit his design blogcyberantix.  

    Plus Premium
     
     
    Add Comment

    Discussion 249 Comments

    Comment Page 8 of 8 1 ... 6 7 8
    1. Mark H says:
      June 22, 2011 at 10:53 am

      Yeah it doesn’t work. Missing the jquery links.

      Reply
    2. Jose Smit says:
      June 26, 2011 at 3:34 pm

      Get the Jquery links using google api link or going to the jquery website.

      Reply
    3. Arturo Rodriguez says:
      July 7, 2011 at 7:00 am

      i like this jquery, but i adatep to asp.net. when user o pass is wrong , show a mess but the div PANEL hide, pls help me,

      Reply
    4. Lovelive says:
      July 18, 2011 at 3:04 am

      I’ve just found this article looking for jQuery techniques, and there is something you missed making your tutorial : Hiding parts of pages by default is a risk in a SEO point of view.
      This kind of trick has already made one of my sites disappear from Google’s index, yet, the hidden part was a very reasonable amount of text.
      All the page, or at least most of it should be visible when Javascript is off.

      Reply
    5. juan camilo says:
      July 26, 2011 at 1:01 pm

      it works… I just coy the .css … its a great work … i am your new fan… jajajaj

      Reply
    6. Farzad says:
      August 7, 2011 at 11:30 am

      This is great but there is a problem when validation is required and therefore the page requires to be refreshed… so once the page is refreshed the login script is disappeared and we need to click on the login button again… so anybody have any solution for this… I know I can handle this using AJAX but I don’t want to and my script should be built using pure PHP and XHTML…

      Thanks

      Reply
    7. Etienne says:
      August 15, 2011 at 7:04 am

      Shitty form

      Reply
    8. Amy says:
      August 15, 2011 at 8:04 pm

      All, Connor did a fabulous job creating this code! Don’t crit.
      Everything works out fine if you know where to find the files (css, just change the file extension accordingly; the same goes for the jquery).

      Also, Connor… are there any limitations as to how this code can be used?

      Reply
    9. peter says:
      August 21, 2011 at 4:55 am

      where are the css and js files can someone help pls ?

      Reply
    10. Tomas says:
      August 22, 2011 at 12:56 pm

      Son unos capos, saludos desde Argentina; muy buenos tutoriales

      Reply
    11. Octaminds Web Solutions says:
      August 31, 2011 at 10:04 am

      What a nice sliding panel… Thumbs up!… Thanks…

      Reply
    12. Jeux Filles says:
      September 5, 2011 at 8:06 am

      How to get the panel open onmouseover and not onclick?

      Reply
    13. seriously says:
      September 16, 2011 at 7:11 pm

      Works great, thank you for the tutorial – but PLEASE tell us, how to have it work with “hover”. Just changing click to hover in the javascript code does not work :(

      Thanks in advance.

      Reply
    14. Sohbet says:
      October 10, 2011 at 7:29 am

      I would like to take this files, css and js and like this… Thanks for example.

      Reply
    15. ryan says:
      October 14, 2011 at 2:09 pm

      When someone tried to click log in, they couldn’t log in why is that? How can I fix it?

      Reply
    16. Popcorn Design says:
      October 24, 2011 at 6:29 am

      The download of the source files do not work, links are broken, can we have a fix please. Thank you!

      Reply
    17. chris says:
      October 26, 2011 at 5:25 am

      demo link is broken
      http://nettuts.041_toppanelwithjquery/demo/index.html

      :(

      Reply
    18. al3mri says:
      October 31, 2011 at 7:13 pm

      this is the full source

      download link
      http://www.mediafire.com/?1z10y5x6s29sx8t

      Reply
    19. mcjerick says:
      November 1, 2011 at 6:13 am

      Good tutorial… i love this very much…i even used it on my thesis..

      Reply
    20. Ian says:
      November 12, 2011 at 5:07 pm

      Thanks Connor! This is pretty awesome!

      Just a few comments based on the recent comments above. Correct me if I’m wrong.

      First I just went ahead and dl’d the link from al3mri’s comment and it works perfectly. I’m still glad for the tutorial so I can understand how it all works.

      As for complaints about loosing google rank, it seems that this would only be an issue if the content of the panel is the content relied upon for ranking. In other words if it’s SEO data put it in the main page and not in the panel. Or does having the div across the panel across the top cause some kind of issue with google?

      The question about usage and copyright. According to the info in the footer of tutsplus main pages anything can be used or modified. It just can’t be redistributed as a tutorial without credit to the other author. I automatically assume I would create my own images, give credit to the author, and modify the code according to my needs so there shouldn’t be a problem with copyright… right?

      On a side note, I believe the following two tuts have enough info to add the actual login functionality with no-script fallback and loader gif and cool screen fade while logging in.
      http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-13/
      http://blog.themeforest.net/resources/jquery-for-absolute-beginners-day-15/

      That’s in case anyone is wondering.

      I’m going to see if I can make the panel show by default if javascript is disabled so that will be a fall back too, and just use this for a login page.

      This kind of thing can be very frustrating for people with script blockers or script disabled but it can all be worked around.

      Thanks again Connor.

      Reply
    21. Prashanth says:
      November 19, 2011 at 12:50 am

      The demo and source links you provided are not found currently … please recheck and give us a working link……..

      Reply
    22. pablo says:
      January 4, 2012 at 11:43 pm

      Demo dont works for me

      Reply
    23. Poslovni adresar Crna Gora says:
      January 24, 2012 at 8:29 pm

      Awesome, thanks for this

      Reply
    24. Web Designer says:
      January 25, 2012 at 8:32 am

      Thanks for this tutorial… Its really nice…

      Reply
    25. Mike G says:
      February 9, 2012 at 12:33 pm

      don’t work the links of source and demo

      Reply
    Comment Page 5 of 5 1 ... 3 4 5

    Add a Comment

    To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.