Benefit: Beautiful and convenient drop-down panel for login / registration

Remember my drop-down login / registration panel implemented with Mootools 1.2 ? I thought that it could be improved both in terms of design and in terms of functionality, and I did it! But from this time on jQuery.



See the demo here »
')

What's new in this version?

• The panel design has been redesigned to make it more fashionable.
• The panel covers the content, instead of moving it.
• The images are transparent ... and work in IE6! (Thanks 24Ways for IE PNG Fix ). This means that you can change the background color of the document as you like, or you can even use a background image.
• The login button, which lowers the panel down, now changes the title from “Login | Registration "on" Close Panel "; I also added some useful rollovers:
  Enter button when the panel is in the closed state:
  
  Enter button when the panel is open:
  
  

The switching effect (.toggle () in JavaScript code) behaves differently in jQuery than in Mootools, and makes it very simple when you switch between the entry and exit buttons when pressed. Here is how I prepared it:

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

* This source code was highlighted with Source Code Highlighter .

... and JavaScript to expand and collapse the panel at the same time as switching the input button to the close button:

$( 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();
});

});

* This source code was highlighted with Source Code Highlighter .

Check out the jQuery documentation for using these effects.

Known bugs

The rollover effect for the login button does not work in IE6 due to the use of the 24Ways script. Considering that when using this script in this browser translucency normally works, I think that we can ignore this minor error.

Loading

Please note that the login and registration forms in this demo will not work out of the box without a user authentication system pre-installed on your website!

Download (55.5 KiB)
Sliding panel works great in IE6, IE7, Firefox, Safari, Opera and Chrome. I have not tested it in IE8. Let me know if everything works there.

How to embed this panel in WordPress

Read the article: Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+

- translator's note: article from the series for newbies, and just a good example of a simple effect