15 jQuery Navigation Solutions And Tutorials

Posted in Scripts, Tutorials | On 8th November 2009 | 7 Comments

Having a good navigation in place can really benefit your sites design and usability, menus haven’t got to be boring as with libraries like jQuery and Mootools you as a designer have more scope to add a top class navigation to your project, that will work across the various browsers and really make your design stand out.

Many cool menus can be done with CSS and HTML alone, but using the plugins with jQuery (which we are covering below) allow effects such as sliding, fading and rollovers to name but a few.

Here are 25 tutorials, plugins and tutorials for your navigations woes, please contact the author if you plan to use their script in anything commercial.

Create An Apple Style Menu And Improve It Via jQuery

apple

Animated Drop Down Menu with jQuery

clark

Creating A Navigation Menu With CSS & jQuery

cssjq

Designing the Digg Header: How To & Download

digg

Color Fading Menu with jQuery

fade

Learning jQuery: Fading Menu – Replacing Content

fader

jQuery Tutorial – Create A Sliding Jquery Menu

nett

A Simple and Beautiful jQuery Accordion Tutorial

qu2

Horizontal Scroll Menu with jQuery Tutorial

que

jQuery Tutorial – How to Make a Smooth Animated Menu with jQuery

roll

Rounded Corner CSS navigation bar with jQuery

roun

A Stylish Navigation Menu With jQuery

stym

Superfish jQuery Menu Plugin

suck

Create a Slick Tabbed Content Area using CSS & jQuery

tab

jQuery look: Tim Van Damme

vand

McBonio

McBonio is a full time web designer, blogger and general web lurker. He runs Tropica Web Design, which is a web agency based in Liverpool, UK. You can also catch McBonio at Twitter: @mcbonio

Visit McBonio's website

Related Posts

Like this post? Share it!

7 Comments

  • Business
    November 9, 2009

    Really nice and awesome. Well this tutorial will help those who love website designing

  • Webstandard-Team
    November 9, 2009

    Nice collection, but if you need some more jQuery-Navigations don’t miss jQuery – The easy way to navigate!

  • KntL
    November 9, 2009

    hi, very nice collection. this type collections are very helpful for us, web developers.

    i have recently posted an shor article about css only navigation i created. it is no javascript, jquery or any image required. you can visit my blog to check it:

    http://kntl.org/css-imageless-but-cool-javascript-and-jquery

    thx

  • DESIGNCHOWK
    November 10, 2009

    Amazing collection, very helpful! thanks!

  • Mia
    November 12, 2009

    these are great ! ive seen most used on various sites , thank u for posting their resource sites. Great site btw :)

Trackbacks