15 Excellent jQuery Navigation Techniques and Solutions

By / May 1, 2009 / Tutorials

Along with content, most would agree that navigation is one of the most important aspects of any website. That’s why it’s crucial to make site navigation intuitive and engaging. jQuery is an excellent choice for achieving this. There are many things you can do with jQuery to spice up menus, but here are 15 of the best techniques and solutions for enhancing website navigation.

jQuery Tabbed Interface

jQuery Tabbed Interface

Sliding Jquery Menu

Sliding Jquery Menu

CSS Sprites2 – It’s JavaScript Time

CSS Sprites2 - It's JavaScript Time

Kwicks for jQuery

Kwicks for jQuery

jQuery File Tree

jQuery File Tree

Learning jQuery: Fading Menu – Replacing Content

Learning jQuery: Fading Menu - Replacing Content

jQuery Context Menu Plugin

jQuery Context Menu Plugin



Create Vimeo-like top navigation

Create Vimeo-like top navigation

jQuery (mb)Menu 2.0

jQuery (mb)Menu 2.0

jQuery idTabs

jQuery idTabs

Create a Slick Tabbed Content Area using CSS & jQuery

Create a Slick Tabbed Content Area using CSS & jQuery

Create a Cool Animated Navigation with CSS and jQuery

Create a Cool Animated Navigation with CSS and jQuery

LavaLamp for jQuery lovers!

LavaLamp for jQuery lovers!

How to Make a Smooth Animated Menu with jQuery

How to Make a Smooth Animated Menu with jQuery

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://renatotavares.com Renato

    Perfeito!!!! ^^

  • http://design-notes.info alex

    nice one I ve read most of them :)

  • http://www.naghies.ir Mizsia

    Nice Collection…i have to read them all…:)

  • http://wellmedicated.com Andrew Lindstrom

    Now how am I supposed to just pick one to use? They’re all awesome! Thanks!

  • Handara

    I really like some of the jquery effects on http://www.yauba.com, especially the scroller for the images and the inline video player. Can you do a tutorial on some of these techniques?



  • http://www.jazzdrummerworld.com Dave

    i love jQuery… is so nice… Thanks for this Post :-)

  • http://jquery.posterous.com Brian

    I also like jQuery HowTo blog. There are no jQuery effects though on that site. But still very useful.

  • http://www.naldzgraphics.net Naldz Graphics

    Pretty useful :) thanks

  • http://arbent.net Angie Bowen

    Great list, I love the Kwicks menu and am going to have to play around with it.

  • http://propagandasantigas.blogger.com.br/ JavĂ©

    I really like some of the jquery effects. Is so nice. Thanks.

  • http://www.spiced2.com Thomas Fjordside

    Great menu inspiration. jQuery is so nice to work with.

  • http://www.twosocks.com.au Capalaba web design

    This is indeed a great source of inspiration. Really like the tab navs myself !

  • http://www.jankoatwarpspeed.com Janko

    Excellent roundup. Thanks for including Vimeo tutorial :)

  • choise

    no. 2 doesnt work ?

  • TLi

    Good THis
    THank alot

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

    nice navigation tuts.. thanks for the list

  • http://www.albert-pak.com Albert Pak

    Next project definitely going to use jQuery’s Fading menu :) Thank you for the great post.

  • http://dhanecrowley.com Dhane Diesil

    This is just what I’ve been looking for. Thanks. I like it!

  • http://thinktankroom.com Ajus

    Really nice JQuery collection. I’ve been looking for something like this for my company website development. Thanks for this useful post.

  • http://akukau.com iib

    nice menu style….wow

  • http://sandbox-ws.com/blog Ahmed El.Hussaini

    Great article, many thanks.

  • claudio

    sooo cool, thanks

  • http://www.invivia.com INVIVIA

    A twist on a tabbed breadcrumb navigation from INVIVIA

    It also has animation, but this feature is disabled until the server starts running AJAX.

  • http://www.aliusdesigns.com Xander

    Such a sweet collection :)

  • http://www.3ddream.net Lampros


  • http://www.webdevtuts.net Marcell Purham

    Excellent list of jquery nav tutorials. Thanks!

  • http://www.cybergrafic.at pixelhunter

    A great selection, thanks for make me watching it! And thanks to give us the chance to learn MORE!!!