--- title: 'Top 10- jQuery Tutorials' url: 'https://www.worldoweb.co.uk/2011/top-10-jquery-tutorials' markdown: 'https://www.worldoweb.co.uk/2011/top-10-jquery-tutorials.md' date: '2011-05-08' description: 'A list of the top 10 jQuery tutorials for web developers.' taxonomy: category: - 'Web Development' tag: - Tutorial - jQuery --- # Top 10- jQuery Tutorials Published on May 8, 2011 by Tracy Ridge in [Web Development](https://www.worldoweb.co.uk/category/category:Web%20Development) 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? ## Automatic Image Slider with CSS & jQuery ![Image Rotator](https://www.worldoweb.co.uk/user/data/wp-content/uploads/image_rotator_1.png "Image Rotator") 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 ![Moving Boxes](https://www.worldoweb.co.uk/user/data/wp-content/uploads/moving_boxes_2-2.png "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](https://tympanus.net/Tutorials/MovingBoxesContent/ "View Demo") | [View Tutorial](https://tympanus.net/codrops/2011/03/28/moving-boxes-content/ "View Tutorial") ### Simple jQuery Dropdown Menu ![DropDown Menu](https://www.worldoweb.co.uk/user/data/wp-content/uploads/navi_drop_down_3.png "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](https://www.brandammo.co.uk/blog/wp-content/uploads/2011/02/jquery.naviDropDown.v1.0.DEMO/ "View Demo") | [View Tutorial](https://www.brandammo.co.uk/jquery-toggle-drop-down-menu-jquery-anydropdown/ "View Tutorial") ## Sliding Door Effect Tutorial with jQuery ![Sliding Door](https://www.worldoweb.co.uk/user/data/wp-content/uploads/sliding_door_4.png "Sliding Door") This tutorial is inspired by [Image Splitting Effect](https://web.enavu.com/demos/dual_sliding_door/ "Dual Sliding Door") Instead of a two corner slide this tutorial has a four corner sliding door effect. [View Demo](https://www.queness.com/resources/html/door/index.html "View Demo") | [View Tutorial](https://www.queness.com/post/620/create-a-stunning-sliding-door-effect-with-jquery "View Tutorial") ## jQuery Tabbed Interface / Tabbed Structure Menu Tutorial ![Tab Menu](https://www.worldoweb.co.uk/user/data/wp-content/uploads/tab_menu_5.png "Tab Menu") 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](https://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html "View Demo") | [View Tutorial](https://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutoria "View Tutorial") ## Animated Form Switching ![Animated Form Switching](https://www.worldoweb.co.uk/user/data/wp-content/uploads/animated_form_switching_6.png "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](https://tympanus.net/Tutorials/AnimatedFormSwitching/ "View Demo") |[View Tutorial](https://tympanus.net/codrops/2011/01/06/animated-form-switching/ "View Tutorial") ## Display Switch Tutorial ![Switch Display](https://www.worldoweb.co.uk/user/data/wp-content/uploads/switch_display_7-2.png "Switch Display") 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 ![Image Gallery](https://www.worldoweb.co.uk/user/data/wp-content/uploads/image_gallery_8.png "Image Gallery") 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](https://www.webdevtuts.net/coding/css/create-a-awsesome-images-gallery-using-css3-and-jquery/ "View Tutorial") ## A Fresh Bottom Slide Out Menu with jQuery ![Fresh Slide Out Menu](https://www.worldoweb.co.uk/user/data/wp-content/uploads/fresh_slide_out_menu_9.png "Fresh Slide Out Menu") 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](https://www.tympanus.net/Tutorials/FreshBottomSlideOutMenu/ "View Demo") | [View Tutorial](https://tympanus.net/codrops/2010/03/09/a-fresh-bottom-slide-out-menu-with-jquery/ "View Tutorial") ## Simple Tooltip with jQuery & CSS ![Simple Tooltips](https://www.worldoweb.co.uk/user/data/wp-content/uploads/simple_tooltips_10.png "Simple Tooltips") 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. ### Share [X](https://x.com/intent/tweet?text=Top%2010-%20jQuery%20Tutorials&url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2011%2Ftop-10-jquery-tutorials&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.worldoweb.co.uk%2F2011%2Ftop-10-jquery-tutorials "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2011%2Ftop-10-jquery-tutorials&title=Top%2010-%20jQuery%20Tutorials "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2011%2Ftop-10-jquery-tutorials "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Top%2010-%20jQuery%20Tutorials%20https%3A%2F%2Fwww.worldoweb.co.uk%2F2011%2Ftop-10-jquery-tutorials "Share on Bluesky") [Email](mailto:?subject=Top%2010-%20jQuery%20Tutorials&body=https%3A%2F%2Fwww.worldoweb.co.uk%2F2011%2Ftop-10-jquery-tutorials "Share via email") #### Tags [ Tutorial](https://www.worldoweb.co.uk/tag/tag:Tutorial) [ jQuery](https://www.worldoweb.co.uk/tag/tag:jQuery) ##### Next [ ← Another Top 10 Linux Resources ](https://www.worldoweb.co.uk/2011/another-top-10-linux-resources) OR ##### Previous [ jQuery Disable and Enable Form Elements Using a Checkbox → ](https://www.worldoweb.co.uk/2011/jquery-disable-and-enable-form-elements-using-a-checkbox) --- ## Navigation - Previous: [Another Top 10 Linux Resources](https://www.worldoweb.co.uk/2011/another-top-10-linux-resources.md) - Next: [jQuery Disable and Enable Form Elements Using a Checkbox](https://www.worldoweb.co.uk/2011/jquery-disable-and-enable-form-elements-using-a-checkbox.md)