maxloaded
21 Nov 2008, 07: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.
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.