A few years ago, when designers wanted to add cool effects to the navigation of a website they used Flash. We all know the types of problems that caused. Now with the growing popularity of javascript frameworks like jQuery, those same types of “Flash-like” effects can be achieved without Flash. Here are 10 jQuery tutorials and techniques to enhance your website’s navigation and menus.
Horizontal Scroll Menu with jQuery Tutorial
BBC Radio 1 Zoom Tabs
Spritemenu
Outside the Box Navigation with jQuery
Sexy Drop Down Menu w/ jQuery & CSS
A Simple and Beautiful jQuery Accordion Tutorial
Make a Mega Drop-Down Menu with jQuery
jQuery look: Tim Van Damme
jQuery Feed Menus
Create a Good Looking Floating Menu with jQuery Easing
Posted in:
jquery,
Web Design
| Thursday, March 10, 2011
The popularity of jQuery continues to grow. This means that we’re seeing it used on more websites these days, and there are more developers coming up with new ways to use it. The great thing about that is many of these developers are sharing what they learn though tutorials and plugins. We’re always on the look out for this new jQuery stuff. So for this post, I’ve gathered 10 tutorials and plugins that will help you learn and implement some fresh jQuery effects in your projects.
This tutorial will teach you how to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position.
Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.
Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography.
imgAreaSelect is a plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).
This tutorial will help you create a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.
Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.
jQuery Panel Gallery is a plugin that converts a set of images into a slideshow with fancy transitions.
Learn how to create a collapsing menu that contains vertical navigation bars and a slide out content area.
Style my Tooltips is a simple jQuery plugin to better style native browser tooltips.
The jQuery Mega Select List is a plugin that converts a long select-list into a mega-menu style display, which makes it easier to find and select the right option.
Beautiful Background Image Navigation
This tutorial will teach you how to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position.
Quovolver
Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.
Lettering.js
Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography.
imgAreaSelect
imgAreaSelect is a plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).
An HTML5 Slideshow w/ Canvas & jQuery
This tutorial will help you create a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.
Tiny Carousel
Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.
jQuery Panel Gallery 2.0
jQuery Panel Gallery is a plugin that converts a set of images into a slideshow with fancy transitions.
Collapsing Site Navigation
Learn how to create a collapsing menu that contains vertical navigation bars and a slide out content area.
Style my Tooltips
Style my Tooltips is a simple jQuery plugin to better style native browser tooltips.
jQuery Mega Select List
The jQuery Mega Select List is a plugin that converts a long select-list into a mega-menu style display, which makes it easier to find and select the right option.
jQuery is the premier library for coding JavaScript page effects. Most popular content management packages run jQuery for both admin and frontend design effects. As a web developer jQuery can be a fun library to spend some time learning and offers tremendous design potential.
It seems there are so many references and guides out there it’s easy to get lost. Below we’ve compiled 19 unique jQuery tutorials to help develop your skills as a frontend developer.
Develop a simple and powerful jQuery script for common HTML form validation.
Learn how to code a structural jQuery login form with sliding animation. Hide your form out of a visitors view until clicked.
Digg has been an innovator for web apps for years. Learn how to develop a dynamic registration form similar to their signup page.
Here you are taught about using jQuery and the new transformation features brought by CSS3 to create a dynamic slider effect.
Part 1 of a detailed series teaching about events in jQuery. Here you’ll learn the bare-bones of the jQuery library and how to use events to construct your own functions.
Here you’ll learn how to submit a web form and display the submission result with some fancy fadeOut or slideUp effects. You’ll utilize both jQuery effects and Ajax for form submission.
Practice designing a spoiler system with a fade-in effect using jQuery. This can be helpful in hiding tips or potential plot spoilers in website comments.
Design a unique content replacement script with a fade effect. You can run small tabs or links on your page to switch betweet content settings.
Here you’ll learn about the jQuery syntax, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.
jQuery can be difficult when first learning about open and close states. This tutorial guides you through the basics of mastering the jQuery toggle states.
jQuery development can be combined with the CSS property z-index to create a unique photo gallery effect.
As a very powerful JS library jQuery can do almost anything these days. Here you’ll create some unique Skype buttons with only some basic jQuery and CSS.
Using basic HTML/CSS and jQuery development we’ll create a simple Apple gallery slideshow effect. Beautiful to fit into any webpage.
Getting back into PHP backend programming here you’ll learn how to connect data retrieved through the backend and place it into jQuery and Ajax effects.
Working with jQuery to manipulate the Document Object Model is a powerful skill to understand. Here there’s 10 fantastic code snippits in working with jQuery and the DOM.
In this tutorial we identify text needed as a quote and using the DOM insert it into any area content. This helps avoid duplicate content and works well with mobile browsers.
In this tutorial you’re guided through how to get started using jQuery inside the Google Maps environment. You can create amazing mashups and creative designs with a simple connecting to the Google Maps API.
Creating a dynamic list in jQuery is a simple effect which goes a long way for user interface. Here you’ll learn the basics of creating a dynamic jQuery powered list.
Here you’ll learn a simple step-by-step way to implement an Flickr Horizontal Menu Demo in jQuery and CSS.
Jake Rocheleau is a social media enthusiast and Internet entrepreneur. He can be followed on twitter - @jakerocheleau His presence on the web can be found at JakeRocheleau.com.
It seems there are so many references and guides out there it’s easy to get lost. Below we’ve compiled 19 unique jQuery tutorials to help develop your skills as a frontend developer.
Form validation from scratch
Develop a simple and powerful jQuery script for common HTML form validation.
Incredible jQuery Login Form
Learn how to code a structural jQuery login form with sliding animation. Hide your form out of a visitors view until clicked.
Creating a Digg Style Signup Form
Digg has been an innovator for web apps for years. Learn how to develop a dynamic registration form similar to their signup page.
Color jQuery & CSS3 Sliders
Here you are taught about using jQuery and the new transformation features brought by CSS3 to create a dynamic slider effect.
Working with Events – Part 1
Part 1 of a detailed series teaching about events in jQuery. Here you’ll learn the bare-bones of the jQuery library and how to use events to construct your own functions.
Ajax-based Form Submission
Here you’ll learn how to submit a web form and display the submission result with some fancy fadeOut or slideUp effects. You’ll utilize both jQuery effects and Ajax for form submission.
jQuery Fade-in Spoiler
Practice designing a spoiler system with a fade-in effect using jQuery. This can be helpful in hiding tips or potential plot spoilers in website comments.
Dynamic Page Content Replacement
Design a unique content replacement script with a fade effect. You can run small tabs or links on your page to switch betweet content settings.
Simplify Ajax development with jQuery
Here you’ll learn about the jQuery syntax, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.
Simple Toggle with CSS & jQuery
jQuery can be difficult when first learning about open and close states. This tutorial guides you through the basics of mastering the jQuery toggle states.
Create a unique Gallery with z-index
jQuery development can be combined with the CSS property z-index to create a unique photo gallery effect.
Design Skype-style buttons with jQuery
As a very powerful JS library jQuery can do almost anything these days. Here you’ll create some unique Skype buttons with only some basic jQuery and CSS.
Apple-style Slideshow Gallery
Using basic HTML/CSS and jQuery development we’ll create a simple Apple gallery slideshow effect. Beautiful to fit into any webpage.
From PHP & XML into jQuery
Getting back into PHP backend programming here you’ll learn how to connect data retrieved through the backend and place it into jQuery and Ajax effects.
Manipulating the DOM(code snippits)
Working with jQuery to manipulate the Document Object Model is a powerful skill to understand. Here there’s 10 fantastic code snippits in working with jQuery and the DOM.
Semantic Blockquotes with jQuery
In this tutorial we identify text needed as a quote and using the DOM insert it into any area content. This helps avoid duplicate content and works well with mobile browsers.
jQuery Basics with Google Maps
In this tutorial you’re guided through how to get started using jQuery inside the Google Maps environment. You can create amazing mashups and creative designs with a simple connecting to the Google Maps API.
Create a Live Updating List
Creating a dynamic list in jQuery is a simple effect which goes a long way for user interface. Here you’ll learn the basics of creating a dynamic jQuery powered list.
Flickr CSS Menu Design
Here you’ll learn a simple step-by-step way to implement an Flickr Horizontal Menu Demo in jQuery and CSS.
About the Author
Jake Rocheleau is a social media enthusiast and Internet entrepreneur. He can be followed on twitter - @jakerocheleau His presence on the web can be found at JakeRocheleau.com.Posted in:
jquery,
Web Developers
|
Sometimes using tabs just makes a lot of sense. For instance, if you have a limited amount of screen real estate, tabs can allow you to save room by giving the user a way to toggle between several items in a small space. And to take your tabs a step further, you can throw jQuery into the mix for some nice transition and animation effects. If you’ve yet to build a tab navigation with jQuery, here are 11 tutorials and plugins to help you get going.
A tutorial and plugin for creating an animated tabbed area.
In this tutorials you’ll learn how to create an AJAX-powered tab page with CSS3 and jQuery.
This tutorials teaches you how to build a dynamic tabbed blogroll with some fun jQuery animations.
This tutorials teaches you how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.
This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.
This tutorial teaches you how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.
This tutorial teaches you how to easily create a tabbed interface using the Tabs function in the jQuery UI library.
This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.
jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.
idTabs is a plugin for jQuery that makes adding tabs into a website super simple. But it can also open the door to endless possiblities.
Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news.
Create A Tabbed Interface Using jQuery
A tutorial and plugin for creating an animated tabbed area.
Sweet AJAX Tabs With jQuery 1.4 & CSS3
In this tutorials you’ll learn how to create an AJAX-powered tab page with CSS3 and jQuery.
Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery
This tutorials teaches you how to build a dynamic tabbed blogroll with some fun jQuery animations.
Create a Slick Tabbed Content Area using CSS & jQuery
This tutorials teaches you how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.
Feature List
This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.
Fancy Sliding Form with jQuery
This tutorial teaches you how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.
Create A Tabbed Interface Using jQuery
This tutorial teaches you how to easily create a tabbed interface using the Tabs function in the jQuery UI library.
Tabify
This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.
Accessible-Tabs
jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.
idTabs
idTabs is a plugin for jQuery that makes adding tabs into a website super simple. But it can also open the door to endless possiblities.
jQuery Moving Tab and Sliding Content Tutorial
Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news.
Posted in:
jquery,
Web Design
|