15 Excellent jQuery Navigation Techniques and Solutions

By / May 1, 2009 / Tutorials
shares

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

Coda-Slider

Coda-Slider

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.

27 Comments

  1. Renato
    May 1, 2009

    Perfeito!!!! ^^

    Reply
  2. alex
    May 1, 2009

    nice one I ve read most of them :)

    Reply
  3. Mizsia
    May 1, 2009

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

    Reply
  4. Andrew Lindstrom
    May 1, 2009

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

    Reply
  5. Handara
    May 1, 2009

    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?

    Thanks!

    Hanny

    Reply
  6. Dave
    May 2, 2009

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

    Reply
  7. Brian
    May 2, 2009

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

    Reply
  8. Naldz Graphics
    May 2, 2009

    Pretty useful :) thanks

    Reply
  9. Angie Bowen
    May 2, 2009

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

    Reply
  10. Javé
    May 2, 2009

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

    Reply
  11. Thomas Fjordside
    May 2, 2009

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

    Reply
  12. Capalaba web design
    May 3, 2009

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

    Reply
  13. Janko
    May 5, 2009

    Excellent roundup. Thanks for including Vimeo tutorial :)

    Reply
  14. choise
    May 5, 2009

    no. 2 doesnt work ?

    Reply
  15. TLi
    May 10, 2009

    Good THis
    THank alot

    Reply
  16. joyoge designers’ bookmark
    May 18, 2009

    nice navigation tuts.. thanks for the list

    Reply
  17. Albert Pak
    May 20, 2009

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

    Reply
  18. Dhane Diesil
    May 28, 2009

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

    Reply
  19. Ajus
    July 6, 2009

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

    Reply
  20. iib
    August 6, 2009

    nice menu style….wow

    Reply
  21. Ahmed El.Hussaini
    August 20, 2009

    Great article, many thanks.

    Reply
  22. claudio
    September 6, 2009

    sooo cool, thanks

    Reply
  23. INVIVIA
    October 2, 2009

    A twist on a tabbed breadcrumb navigation from INVIVIA
    http://www.microsoft.com/services

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

    Reply
  24. Xander
    October 8, 2009

    Such a sweet collection :)

    Reply
  25. Lampros
    October 13, 2009

    excellent!!!

    Reply
  26. Marcell Purham
    December 25, 2009

    Excellent list of jquery nav tutorials. Thanks!

    Reply
  27. pixelhunter
    August 3, 2010

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

    Reply

Leave a Reply