How to Build a Top Sliding Login Panel

Javascript

In your wordpress theme (where you want to implement the sliding login panel), open up the header.php file. Paste the following code just before the head ending tag (< /head>) :-

The above script will call jQuery using Google API and also initiate the sliding effect into your login panel.

HTML

In the same header.php file, right after the body tag (< body>) starts, paste the following code :-

    

        Table of Contents            

    
    
                    1.
                Login
    
    
    
                    2.
                Control Panel
    
    
Login





Register |
Recover password



Control Panel
Dashboard
 |
Write new Post
 |
Write new Page
 |
Logout


LoginLogout

The above code will integrate the sliding panel on top of your wordpress theme.

CSS

Now, all we are left with is styling the panel. Open up your style.css file and paste the following at the end of the file :-

* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}

Now, try running your theme. Voila! You have a fully functional Sliding Login Panel of your own! Let me know if you have any issues.