Hello welcome to another tutorial by hv-designs, in this tutorial we’ll be creating and coding a login form concealed within a sliding panel, the sliding panel itself will expand once clicked, revealing the content within.

 

The first thing you need to do is mockup your slide panel in photoshop, ive used the header from my gaming layout 6 tutorial. Ive replaced the top navigation bar with a thin grey bar about 2-3 pixels in height. Ive then created a button in the middle of the grey bar using the rounded rectangle tool. Heres what mine looks like.

For the purposes of this tutorial you may download and use the PSD ive created, you can download the PSD “HERE“. Create a new folder on your desktop called “what ever you want” inside this folder create another two folders called “images” and “js”. Open up a blank notepad document and goto “file > save as”, save the blank document as “styles.css” inside your main folder. Save another blank document as “panelslide.js” only this time save it inside your “js folder”.

Goto the main jquery website and download jquery, save the file into your “js” folder. Open up your favourite code editor and create a blank HTML file, save the file as index.html inside your main folder. Now lets link our css file and js files, place the following code into the head of your html document.

Now lets begin to mark-up the top part of the website and the sliding panel, the mark-up is pretty short and sweet. Start off with a div of “container”, inside the div container add another div called “header”.

Inside the div header add another div id of “slide-panel”, all the content for the sliding panel should be inserted within the slide-panel div.

Thats all we need for the markup, time for some CSS, for the purpose of this tutorial im going to code the header as one image, instead of coding it all seperate as we dont really need a proper search from etc.. Firstly lets create our image slices, your going to need a snippet of the background to apply as the body background, then your going to need an image of the header wthout the slide button. See images below.

 

Your also going to need a single image of just the slide button without text.

You now should have 3 .PNG files inside your images folder.

Head over to your stylesheet and add the following styles. Please refer to the comments for each style.

Once you’ve added the styles above you should now see your repeated background and your header image. You may need to adjust the height of the header div to the same height as your header image. We can now add the styles for our sliding panel, again refer to the commented code next to each style.

The div “slide-panel” is our a panel the other two classes “slide & btn-slide” are for our slide button. Underneath the slide panel ending div in your HTML document add a P tag with a class of slide, add a HREF tag to the word login. Add a class of btn-slide to the link. Use a “#” for the link url.

You can also now add your content inside the slide panel div. Lets now connect it all together with jquery, the jquery code itself is pretty simple, open up your panelslide.js file and add the follwowing code.

Your slide panel should now work, although for the opacity style to work in internet explorer we need to change the way the opacity style is written. We need to setup a new stylesheet just for internet explorer, open up a blank notepad document and save it as ie.css inside the main folder. Open up the ie.css document in your code editor and add the following style.

We now need to link the file in our html file, in the head of the html file add this bit of code.

You will also need another style to work with internet explorer 8, you can either setup another style sheet or you can tell the internet explorer 8 browser to emulate internet explorer 7.

Your sliding panel should now be complete. Heres an example of it empty.

Heres an example with an example login form.

Hope you enjoyed this tutorial, dont forget to subscribe via RSS and twitter. Your support is much appreciated.