Nice & Clean Sliding Login Panel built with jQuery

June 10, 2009 · No CommentsComments Feed

A while ago, I created a Slidedown Panel similiar to that on Dynaic Drive (though the script there isn't mine). Well I've re-tooled it to work with JQuery, and have included it in this here tutorial.

What's the scope of this tutorial?

• Panel has been redesigned to be “slicker”.
• Panel overlaps content instead of “pushing” it.
• Images are transparent… and work in IE6! (Thanks to 24Ways for their IE PNG Fix.) This means, you can change the background color of the body as you wish or even set a background image.
• Login button that slides the panel down changes from “Log In | Register” to “Close Panel” on click and I have added some nice rollover images

The Toggle effect (.toggle() in the javascript code below) behaves differently in jQuery than in Mootools and makes it dead simple to switch the login and close buttons on click. Here’s how I proceded:

<li id="toggle"> <a id="open" class="open" href="#" mce_href="#">Log In | Register</a> <a id="close" style="display: none;" mce_style="display: none;" class="close" href="#" mce_href="#">Close Panel</a> </li>

… and the javascript to expand/collapse panel and switch the buttons on click: $(document).ready(function() { // Expand Panel $("#open").click(function(){ $("div#panel").slideDown("slow"); }); // Collapse Panel $("#close").click(function(){ $("div#panel").slideUp("slow"); }); // Switch buttons from "Log In | Register" to "Close Panel" on click $("#toggle a").click(function () { $("#toggle a").toggle(); });

Check the jQuery documentation for usage.

There is however a slight kaibash: Rollover effect for the login button doesn’t work in IE6 because of 24Ways’ script. Knowing alpha transparency works perfectly in this browser I think we can disregard that minor bug. The sliding panel works like a charm in IE6, IE7, Firefox, Safari, Opera and Chrome. I didn’t test it in IE8 yet.

You can download the Tutorial Files Here.