Being a big fan of jQuery I have put together a selection of jQuery tutorials. Tutorials that range from simple tooltips to navigation menus and image galleries. Do you have any favourite tutorials or do you reach straight for the plugins? Please feel free to comment.
Automatic Image Slider with CSS & jQuery
The moving boxes tutorial combines several jQuery plugins to produce a pretty animated box which you could use as navigation or as part of a website.
Simple jQuery Dropdown Menu
Here is a simple jQuery plugin which allows you to create a simple drop down menu, utilising hoverIntent, and jQuery’s own slideUp and slideDown effects. You can also set the orientation of the drop down depending if your navigation is horizontal (default) or vertical, and set the duration and easing method of both slideUp and slideDown on initiation of the plugin..
This tutorial is inspired by Image Splitting Effect Instead of a two corner slide this tutorial has a four corner sliding door effect.
jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Lot of websites and blogs are using tab based content as a way to save spaces in a webpage. It’s a good space-saver and if used it correctly, it can boost your website usability as well.
Animated Form Switching
This tutorial creates a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
Display Switch Tutorial
Today’s web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.
Create a Awesome Image Gallery Using CSS3 and jQuery
This tutorial creates a very simple but great looking image gallery using jQuery and CSS3. The image gallery will be tilted to the side and on hover will move. Whenever you click on the image a lightbox will pop out.
A Fresh Bottom Slide Out Menu with jQuery
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.
Simple Tooltip with jQuery & CSS
Tooltips are very common in web design are used very productively. A tooltip is a box which appears when you hover over an element such as a hyperlink. It can be used effectively to display some extra information whether it is to describe what the link is, or display images or previews of websites. This tutorial is small and lightweight which is why I chose it in my top ten.