How to Make a jQuery Top-Sliding Login Panel

There’s a certain kind of style you can only get from a top-sliding login panel. That smooth transition of a clean login box sliding from the top of the screen just adds some class to a website. It’s also extremely functional as it’s very noticeable, but it doesn’t stick out like a sore thumb. One of the best part’s about it? You can make it in three easy steps.

For a demo of the panel, just go here.

Step 1 – Add the JavaScript

The first thing you need to do is paste the following JavaScript into your header.php file. You should put it right before the </head> tag.

See code on this Pastebin page: http://pastebin.com/Ap4pdBBJ
[pbcode id=”Ap4pdBBJ”/]

Step 2 – Add the HTML

Next you’ll need to paste the following code into the header.php file. Paste it in right after the <body> tag.

See code on this Pastebin page: http://pastebin.com/PBuGukKY
[pbcode id=”PBuGukKY”/]

Step 3 – Add the CSS

Finally (yeah, it only took 3 steps!), you’ll need to copy the following CSS into your style.css file.

See code on this Pastebin page: http://pastebin.com/dnBMxU7G

[pbcode id=”dnBMxU7G”/] This has been tested with multiple themes and plugins including BuddyPress, so you shouldn’t have any problems with it. The final product should look like this when the site is first opened:

Sliding Login Panel   DEMO(unopened)

 

Then like this after you click it (A tiny bit is cut out since it’s a long image. Click it to see full image):

Sliding Login Panel   DEMO

Source: Blog Oh Blog! via WPMU