jQuery Week: Navigation Inspiration & 9 tutorials

jQuery week continues with all things jQuery navigation after a brief interruption by the flu.See it in action:

Dreamer Lines

The navigation on this site isn’t really all that complex, but the effect is pretty nifty: The highlighted words change color when you hover over the corresponding navigation item and vice versa.

Unowhy

So, the photography made me hungry and the recipes even moreso, but the site is here because of the jQuery effect both on the page spanning home-page navigation and the animated question marks (Click the “Inspirez-moi” circle).

Druckbar

A German design agency with a restrained garage door effect on the rollovers on the center of the page.  A truly excellent example of design, both in the static and javascripted parts.

Aviary

An online imaging suite (there is an image editor, a vector editor, a sound editor, effects editor and more) and they even have a tutorial for creating and submitting a design on Threadless with their tools. But the jQuery effects here are minimal again. They liven up the navigation without being over the top.

These three examples show fabulous restraint while still giving the added enhancement of jQuery. The thing to remember with the effects is the restraint. Just because it is possible to make everything move and respond to the user and fly around the screen, doesn’t mean it should. And with those words of warning, I give you my favorite navigation tutorials & plugins!

Build it yourself:

jQuery Tabbed menu (via Queness)
jQuery Sliding Menu (via I Love Colors)
Slick Animated Navigation (via Net Tuts+)
Superfish Navigation
Vimeo Style Navigation
Smooth Animated Menu (via BuildInternet)
jQ Dock
Long Dropdowns (via CSS Tricks) 

About mary fran

Mary Fran has been obsessed with the web for over 12 years. She owns Purple Crayon Web Studio. She is a seasoned web developer and this year she finally decided to write this blog.