Top 10- jQuery Tutorials

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

This HTML based image slider was designed with the ipad in mind, especially as there is no support for Flash. Simple widgets like the image slider using HTML/CSS/Javascript will have its benefits with SEO and will also degrade gracefully for those without javascript.

Links are Dead!

Moving Boxes

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.

View Demo | View Tutorial

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..

View Demo | View Tutorial

Sliding Door Effect Tutorial with jQuery

This tutorial is inspired by Image Splitting Effect Instead of a two corner slide this tutorial has a four corner sliding door effect.

View Demo | View Tutorial

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.

View Demo | View Tutorial

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.

View Demo |View Tutorial

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.

View Tutorial

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.

View Demo | View Tutorial

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.