10 Fresh jQuery Tutorials to Enhance Navigation Menus

By / Oct 15, 2009 / Tutorials

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

jquery navigation

BBC Radio 1 Zoom Tabs

jquery navigation


jquery navigation

Outside the Box Navigation with jQuery

jquery navigation

Sexy Drop Down Menu w/ jQuery & CSS

jquery navigation

A Simple and Beautiful jQuery Accordion Tutorial

jquery navigation

Make a Mega Drop-Down Menu with jQuery

jquery navigation

jQuery look: Tim Van Damme

jquery navigation

jQuery Feed Menus

jquery navigation

Create a Good Looking Floating Menu with jQuery Easing

jquery navigation

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

  • http://www.madebyguerrilla.com Mike Smith

    Nice list. the timvandamme one is going to come in handy for the new version of iammikesmith.com I am working on.

  • http://drawne.com Andy Feliciotti

    This couldn’t come at a better time, trying to learn jQuery ATM

  • http://webstandard.kulando.de Webstandard-Team

    Nice Collection of jQuery-Navigations. If your interested in some other Navigation-Solutions by jQuery, don’t miss jQuery – The easy way to navigate!

  • http://www.crearedesign.co.uk Daniel Long

    There are some really good ideas for nav menus in this collection. The first example is one of my favourites, I think it would work well as a menu for an archive of blog posts. Another great example is the ‘Spritemenu’. I really like how when hovering over a button, the darker blue covers the button to highlight where you are. I will definetly be following the tutorials to try and re-create some of these, and try to push the idea further.

  • http://joaoramos.org joão

    I’m absolutelly in love with the first plugin on this showcase.. it’s beautiful! :)

  • http://www.joyoge.com joyoge bookmark

    nice list, thanks for share..

  • http://www.k-win.fr kevin

    Nice list, thanks!

  • http://wwwthecomplexmedia.com/ theComplex

    Great list, can’t wait to share!

  • http://www.twitter.com/MCEctoCooler MCEctoCooler

    I was JUST looking for a ‘sexy’ drop down effect when I came across THIS post. Wahoo!

  • http://tr.im/mewC Rahul – Web Guru

    Nice one.. downloaded…

  • http://www.chrismorata.com Chris Morata

    What a great roundup! I will definitely be using some of these with my next project.

  • http://tutzone.net/ Bariski | TutZone.net

    I have been your blog reader for quite a long time, as you always share something new, but this post made me to reply. Very nice listing, bookmarked for sure. Thanks.

  • http://www.givision.net GIVISION | Jiri Mocicka

    Hey folks this is great!
    Really considering premium package ‘-)

  • http://www.sosmedia.org SOS Media Web Design

    Nice links to some great jQuery nav elements. Thanks!

  • Jeremy

    Great list, but…

    The “Outside the Box with jQuery Navigation” only links to an example. Is that not a packaged download, just an example of what you can do? Thanks.

  • http://siyudis.com yudhistira

    nice, thank you for the tutorial :)

    you’re absolutely fantastic :)

  • http://www.sebastiansulinski.co.uk/web_design_tutorials/tutorial/51/animated_navigation_with_jquery Seb

    Great work – really useful source!

  • http://tweak2.com gouri

    Excellent List. I will use some of them in my current project. Thanks

  • http://www.tunetek.de.tl Basti

    Great list :)

  • http://www.webpagelottery.com WebpageLottery

    Please post more these kind of jQuery effect posts in the future. Thank you.

  • http://raredriver.blogspot.com/ Samson Delila

    Wow! Most wanted amazing jquery tuts!
    Its very nice you write all of them on one post.
    Thanks for share this…