PDA

View Full Version : Xhtml/css slide-in panel



maxloaded
21 Nov 2008, 06:01 AM
Slide-in panels are useful if you have limited space on your pages, and users definitely love it.

Here I've made a simple top panel for my site to slide in video thumbnails when clicked:

FilmaleM (http://www.filmalem.com) --- Click on the 'Quick Picks' tab at the top of the page and a panel with some videos will slide in.

Creating your slide-in panel is not that hard if you know the basics of editing html/css.

I'll give you the link to the tutorials, as there is no point in rewriting their article here. Check it out:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

They've covered a few basic jquery tricks there. Once you check the source code of the demo pages in your browser, you'll figure it out easily.

The spteps are simply:

- Download jquery library and upload it to your server.
- Include jquery library in your header as you normally do with any javascript file.
- Include the javascript for the tutorial in your header as well.
- Check the source code of the demo and add the css styles to your css file.
- Create the necessary html elements in your documents with the right IDs and Classes. (Check the demo source code).
- Start customizing when you are comfortable with it.