Build Internet has a brand new theme, and that's only the beginning. Read the full story or hide this bar

8 Sites with Excellent jQuery Navigation

This is a gallery of sites that use jQuery to make the navigation clean, sharp, and elegant. These sites use the framework to do more than just add gratuitous effects.

Even though I’m a huge fan of Actionscript, Flex, and Flash in general, I love when navigations can keep usability while achieving fluid animation. A couple of these are so fluid you may forget it’s not Flash.


1. Carrot Creative

http://carrotcreative.com/
Carrot Creative

2. Grooveshark Widgets

http://widgets.grooveshark.com/
Grooveshark Widgets

3. Aviary

http://aviary.com/home
Aviary

4. WP Coder

http://wpcoder.com/
WP Coder


5. Matt Dempsey

http://www.mattdempsey.com/work.php
Matt Dempsey

6. Bright Creative

http://www.brightcreative.com/portfolio/
Bright Creative

7. Red Crown Studio

http://www.redcrownstudio.com/
Red Crown Studios

8. MacHeist Loot

http://www.macheist.com/loot/
Correction: This one is actually mooTools, and snuck into the wrong post. Sorry for any confusion. Thanks for the tip Chris Raymond!
Macheist Loot

This list was the quick result of bookmarks I’ve had for sometime. Have I missed any other mind blowing navigation like Carrot Creatives that deserve a shout out? Share in the comments.

Wordpress.com stats not installed! Posted Friday, January 2nd, 2009 / Back to Top

I this post. Tweet
SPONSOR

93 Comments 18 Mentions

  1. jayz Author Editor

    excellent, i hope i can make like or better like that..
    thx for your information

    January 3, 2009 · Reply

  2. Online hry Author Editor

    Great list!

    January 3, 2009 · Reply

  3. Joe McCann Author Editor

    Wow, Carrot Creative…11 Megabyte home page, page weight! Ouch…

    January 3, 2009 · Reply

  4. Zach Dunn Author Editor

    @Joe McCann
    Nice observation, I hadn’t noticed that before. I guess that shows you the downsides to having your website one giant page of content with scrolling. God bless their servers.

    January 3, 2009 · Reply

    • sven Author Editor

      Hi. I get the looking at the page source for jquery being loaded or not but how do you see the size of the page. i.e finding that creativecarrot.com has an 11mb page?

      January 11, 2011 · Reply

      • ray Author Editor

        a u ok?

        June 3, 2011 ·

    • Matt C Author Editor

      But you could load parts of it with AJAX (via jQuery) when it is needed. That way you still get those transitions without loading all the data at once ;)

      April 1, 2011 · Reply

  5. Werehamster Author Editor

    Check out http://thinkav.co.nz/.
    The best effect is the color fade on the page transition arrow (it took me a while to figure out how to achieve it). All written in jQuery and the entire site degrades nicely if javascript is turned off, or your browser is too old to handle it.

    January 3, 2009 · Reply

  6. Gerhard Author Editor

    jQuery is hot, the sites you mention, too! ;-)
    And in the times of broadband internet access, who cares about a few MegaByte, Joe?

    Thanks for this entry.

    By the way: How did you notice, that these sites use jQuery?

    January 3, 2009 · Reply

    • Zach Dunn Author Editor

      @Gerhard

      It’s more of a server strain than a loading issue with large page sizes. Also, you can look into the source code of a page to see that jQuery is being loaded. Try it out!

      January 3, 2009 · Reply

  7. KrazyCeltic Author Editor

    Unfortunately some of the sites, such as Aviary’s website, were not progressively enhanced. When javascript is disabled in the browser, the primary horizontal menu does not expand, which is not really much of a problem, but then the pictoral tabbed navigation in the middle of the main page does not perform any action at all when clicked.

    January 3, 2009 · Reply

  8. Josh S Author Editor

    I would definitely nominate clarklab’s Quicktab theme for WordPress, which easily produces single page marketing sites with jquery navingation. Here’s a great example: http://50pctoff.com

    January 4, 2009 · Reply

  9. kiran Author Editor

    Really Awesome….

    January 4, 2009 · Reply

  10. ako Author Editor

    Impressive stuff, jquery is mandatory knowledge for web developers these days…

    January 4, 2009 · Reply

  11. Peter Author Editor

    @Joe McCann: Here in sweden i got 1 Gigabit internet connection. So if a site is 10,20 or 100 MB, i don´t care for i got real broadband! LOL

    January 4, 2009 · Reply

  12. pixeline Author Editor

    this interactive barcode image gallery is also made entirely in jquery: http://www.lisapram.com

    January 4, 2009 · Reply

  13. Víctor Author Editor

    Great list!!
    Check out http://wpesp.com

    January 4, 2009 · Reply

  14. Chris Raymond Author Editor

    MacHeist does not seem to be using jquery from what I can see–mootools. Or maybe I am looking at source code of a different page?

    January 5, 2009 · Reply

    • Zach Dunn Author Editor

      @Chris Raymond

      You appear to be absolutely right. When I was gathering sites for this gallery I made two different sets. One for jQuery and then another one for a mooTools showcase to follow. This one has apparently snuck into the wrong party! Sorry for any confusion.

      January 5, 2009 · Reply

  15. Tiffany Author Editor

    This list is great. I am amazed how far the web has come. I had thought some of these were only possible in huge swfs. Thanks for compiling.

    January 6, 2009 · Reply

  16. James Author Editor

    Almost all prevent the user from using the back button and many involved mystery meat navigation. They might look/act cool, but whatever happened to usability?

    January 13, 2009 · Reply

  17. Zach Dunn Author Editor

    @James – I’m just as much an advocate to usability, but I’ll also admit that some of the best examples in creativity are not necessarily great representatives of this. I rounded these up as an example of what can be accomplished using jQuery. Usability, like most components of web design, can be implemented as needed by the web designer/developer as well.

    January 13, 2009 · Reply

  18. Not Good Design Author Editor

    Almost NONE of these pages WORK in the LATEST Opera browser. Clicking on things on these pages have no effect in 50% of cases. If that’s a jQuery bug or just bad use of jQuery (or a mix of browser-specific hacks and jQuery on the sites), I don’t know. Whatever the cause, the pages alienate all Opera users.

    January 23, 2009 · Reply

  19. Bradley Holt Author Editor

    Not as fancy as some of the stuff here, but still interesting IMHO – granted, it’s my company’s website ;-)

    http://www.foundline.com/

    There’s no Flash anywhere on the site, the menu and all animation effects are done with jQuery.

    February 3, 2009 · Reply

  20. Simple Author Editor

    Wow, the websites are just amazing. Design is really impressive. How much would it have cost to design a site like this frens ?
    Regards,
    Simple

    February 24, 2009 · Reply

  21. Jono Author Editor

    Wow cool, some left me speechless but if I just was speechless this would be an empty post…
    I like the first one with page transitions.

    March 16, 2009 · Reply

  22. Adrian Author Editor

    I like the site navigation of Red Crown Studio
    If there is a tutorial how to implement this kind of navigation is great

    April 2, 2009 · Reply

  23. Roberto Author Editor

    Very good picks. Love the Grooveshark Widgets one.

    Thanks for sharing.

    May 28, 2009 · Reply

  24. wpdigger Author Editor

    Really good and really interesting post. I expect (and other reader’s maybe :)) new useful posts from you!

    wpdigger’s last blog post..Theme Membership Sites – Are those really useful

    June 1, 2009 · Reply

  25. Webagentur Author Editor

    Thank you … this all has me very helped.

    June 6, 2009 · Reply

  26. Jad Graphics Author Editor

    Great examples here of excellent jquery menus. I really like your website, and I believe that you are doing an excellent job.

    Jad Graphics’s last blog post..Great Quotes on Creativity and Design

    June 10, 2009 · Reply

  27. COOL Author Editor

    Looks very interesting. Thanks for sharing..
    http://www.mpos.net/s/p4.asp

    July 3, 2009 · Reply

    • Janesa Author Editor

      Superb inforatmion here, ol’e chap; keep burning the midnight oil.

      September 21, 2011 · Reply

  28. sascha Author Editor

    We also build up a nice navigation with jQuery and an unsorted list. Maybe someone like it: http://brotherskorth.com/index.php?id=referenzen

    November 6, 2009 · Reply

  29. takien Author Editor

    thanks for the list,
    I am still learning jQuery

    November 29, 2009 · Reply

  30. Bockerl Author Editor

    Wow, this is very cool and I can that good needed.

    December 17, 2009 · Reply

  31. Steve Costello Author Editor

    I have to agree with some of the opinions regarding this list… most of these score pretty low on the usability scale, as well as some other scales. For instance, as has already been noted, the 11MB load on Carrot Creative. That isn’t creative… that is a lot of fail.

    The usage of words like “excellent” and “awesome” has become so diluted, it is hard to separate the wheat from the chaff. Most of these examples are chaff. Granted, some might be pretty… but being pretty does not make it excellent.

    IMHO, for a navigation system to be described as “excellent,” it needs to satisfy the following (and not necessarily in this order… but ALL of the following):

    * it should be attractive
    * it should be functional
    * it should not leave the user guessing (mystery meat navigation)
    * it should be accessible (I shudder to think what any of these look like on a screen reader or other device used to aid those that are disadvantaged in some way)
    * it should not break the browser (the back button should be fully usable)
    * it should be comprehensive (the user should not have to click more than 2 or 3 times to get where they are trying to go)

    I’m sure there are more, but those are off the top of my head. Most of the sites fail at nearly all of these basic conditions.

    (Note: While all of these sites may have “excellent” design, I am speaking strictly about their navigation.)

    1.) Carrot: There is so much wrong with this site, I don’t even know where to start. Not accessible. Not bookmark-able. Breaks the browser. And the navigation system forces the user, who may be sitting in an Internet cafe in Thailand, to download the ENTIRE 11MB. Inexcusable. Their “director of user experience” should pick up a book or two about UX. In addition, their site does not do much for SEO at all.

    2.) Grooveshark Widgets: Not sure what about the nav on this site is all that excellent. It looks fine, and accomplishes much of what it needs to. But the site itself is fairly small… three or four pages. Now, if you are talking about their FORM design (to create their widgets), that’s great. But the nav? It is perfectly capable and great looking, don’t get me wrong. For navigation to be called “excellent,” I would think it needs to solve a more complex navigational solution than 3 or 4 pages.

    3.) Aviary – This is much better, but just misses the mark. It solves a complex navigation solution. Although the site requires JS to actually work, and the nav requires it to work fully, you are still able to navigate the site. the nav is designed to work well with any SEO optimizations. It needs some help as far as accessibility is concerned, however, so it misses the mark on “excellence.”

    4.)WP Coder – Another site that forces the client to essentially load the entire site. Check out the source code. In addition, SEO goes right out the window. And certain links open new tabs in the browser without any indication that they do so… really annoying. The nav itself is not accessible.

    5.) Dempsey – Not accessible. Not optimized for SEO. Can’t tell what links I’ve already visited. Can’t tell at a glance what section of the site I’m on. It’s a fine site, don’t get me wrong. But the navigation itself isn’t “excellent.”

    6.) Bright Creative – Nice from a design perspective, not bad navigation, and a passing grade for accessibility. But not “excellent” navigation.

    7.) Red Crown – Again, nice from a design perspective, but there really isn’t much to navigate here. It’s one page with a gallery. At least the gallery images load dynamically. But “excellent” navigation?

    8.) MacHeist – Sorry, but I am completely missing the excellence in navigation here. Competent, for sure. It gets the job done. But the site itself is fairly simple… there isn’t much to navigate.

    TL;DR – These sites may be pretty to look at. There may have been a lot of thought put into the look and feel. But none of them really qualify as “excellent” navigation if you /strictly/ look at their navigation.

    January 19, 2010 · Reply

  32. Surftipps Author Editor

    Well done, good choise. This is really helpful

    January 28, 2010 · Reply

  33. ooty Author Editor

    good collection thanks

    March 7, 2010 · Reply

  34. Gökhan Pur Author Editor

    thanks all )

    March 12, 2010 · Reply

  35. Indonesia Forum Author Editor

    thanks for the list..
    really help for newbies like me.. :)

    August 8, 2010 · Reply

  36. Richard Author Editor

    pls can i get a very good navigation sorftware in my phone. Nokia 6760i

    September 22, 2010 · Reply

  37. Düzce Author Editor

    Thank you … this all has me very helped

    September 22, 2010 · Reply

  38. Ripan Author Editor

    here’s a very good website jquery – http://www.ripansekhon.co.cc

    October 8, 2010 · Reply

  39. chat Author Editor

    Really Awesome….

    October 11, 2010 · Reply

  40. Chat Author Editor

    This is much better, but just misses the mark. It solves a complex navigation solution. Although the site requires JS to actually work, and the nav requires it to work fully, you are still able to navigate the site. the nav is designed to work well with any SEO optimizations. It needs some help as far as accessibility is concerned, however, so it misses the mark on “excellence.”

    October 15, 2010 · Reply

  41. Anoesj Author Editor

    I like my own website a lot more than many of these websites here..

    October 15, 2010 · Reply

  42. Chat Author Editor

    Sorry, but I am completely missing the excellence in navigation here. Competent, for sure. It gets the job done. But the site itself is fairly simple… there isn’t much to navigate

    October 18, 2010 · Reply

  43. turkchat Author Editor

    Fine was a work and full-time. Thank you.Thanks a lot for this beautiful post

    October 30, 2010 · Reply

  44. Chat Author Editor

    Hi world. Thanks.

    November 6, 2010 · Reply

  45. Ask Siirleri Author Editor

    Sorry, but I am completely missing the excellence in navigation here

    November 18, 2010 · Reply

  46. Ahmed Shaker Author Editor

    Great collection, I love the one in macheist.com/loot/, here is another example using beautiful jQuery in web design http://ashaker.com Carousel slider and CSS-Dock :)

    November 21, 2010 · Reply

  47. sohbet Author Editor

    The best effect is the color fade on the page transition arrow (it took me a while to figure out how to achieve it). All written in jQuery and the entire site degrades nicely if javascript is turned off, or your browser is too old to handle it…

    December 5, 2010 · Reply

  48. sohbet Author Editor

    thanks for this blog and nice post

    December 8, 2010 · Reply

  49. sohbet Author Editor

    good collection thanks

    December 8, 2010 · Reply

  50. sohbet Author Editor

    Wow, the websites are just amazing. Design is really impressive. How much would it have cost to design a site like this frens ?

    December 8, 2010 · Reply

  51. chat Author Editor

    Fine was a work and full-time. Thank you.Thanks a lot for this beautiful post

    December 12, 2010 · Reply

    • Margery Author Editor

      You have more useful info than the Britsih had colonies pre-WWII.

      September 20, 2011 · Reply

  52. burhan Author Editor

    nice..thanks..

    December 27, 2010 · Reply

  53. güncel blog Author Editor

    thanks, very good website.

    February 15, 2011 · Reply

  54. Binny Author Editor

    Good work done..We students get good ideas by such work..

    March 3, 2011 · Reply

  55. kaprisli Author Editor

    thank you very macht blog

    March 8, 2011 · Reply

  56. depresiyon test Author Editor

    Thanks a lot for this amazing article

    April 5, 2011 · Reply

  57. Akrostiş şiir Author Editor

    Akrostiş şiir, for thanks for this

    April 5, 2011 · Reply

  58. Oliyide Oluwafemi John Author Editor

    Cool samples……

    April 26, 2011 · Reply

  59. mersin emlak Author Editor

    Good collection thanks…

    May 10, 2011 · Reply

  60. nadeem Author Editor

    nice compillation.!!! .. i want to know to know how to use the effect of these sites into my website project!!!!

    May 11, 2011 · Reply

  61. Mike at Computer Lagging Author Editor

    I have been wanting some help with JQuery. Thanks for the help, mike

    June 10, 2011 · Reply

  62. tavoli Author Editor

    Thank’s man, now i can finish my site

    July 6, 2011 · Reply

  63. troto Author Editor

    Sheeesh, tnx a lot for your lessons.

    July 17, 2011 · Reply

  64. Brian Wiltshire Author Editor

    Awesome, Thanks for the share, I am busy with a jquery nav now and this was nice to read !

    August 26, 2011 · Reply

  65. Silvi Author Editor

    great for inspiration

    August 29, 2011 · Reply

  66. konteyner Author Editor

    That are frequently updated, keeping up-to-date with the most recent products, the top deals, and helpful information on products and services.

    September 6, 2011 · Reply

  67. pembe maske Author Editor

    thank you very macht blog

    September 19, 2011 · Reply

  68. allen Author Editor

    this is nice!

    October 14, 2011 · Reply

  69. chat odasi Author Editor

    hei Ilike it very much, I hope you will soon update your work!thanks for sharing.

    October 14, 2011 · Reply

  70. Andrew Author Editor

    Nice one, keep it up! I want to see MORE!

    November 30, 2011 · Reply

  71. chat Author Editor

    I like the first one with page transitions God bless their servers

    December 14, 2011 · Reply

  72. bütün gazeteler Author Editor

    We students get good ideas by such work..

    December 15, 2011 · Reply

  73. Kenny Author Editor

    Yeah… thanks for sharing this nice list of jQuery showcase. Good job!

    February 9, 2012 · Reply

  74. Elvis Nevins Author Editor

    I don’t even know how I ended up here, but I thought this post was great. I don’t know who you are but definitely you are going to a famous blogger if you aren’t already ;) Cheers!

    March 22, 2012 · Reply

  75. Inspirational Quotes Author Editor

    8 Sites with Excellent jQuery Navigation | Build Internet I was suggested this website by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my difficulty. You’re wonderful! Thanks! your article about 8 Sites with Excellent jQuery Navigation | Build Internet Best Regards Veronica Yoder

    March 26, 2012 · Reply

  76. Louis Vuitton Damier Ebene Canvas Graphite Travel Ebony N41140 Author Editor

    Hey There. I found your blog using msn. This is an extremely well written article. I will make sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will definitely comeback.

    March 26, 2012 · Reply

  77. patio furniture Author Editor

    8 Sites with Excellent jQuery Navigation | Build Internet I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my problem. You are wonderful! Thanks! your article about 8 Sites with Excellent jQuery Navigation | Build InternetBest Regards Cassetta

    March 29, 2012 · Reply

  78. Mersin Emlak Author Editor

    Grooveshark’s site is my fav. I also like the red crown studio’s from a usability perspective. Thank you very much for sharing.

    July 21, 2012 · Reply

  79. Mersin Emlak Bul Author Editor

    Thanks for sharing. this is nice!

    September 30, 2012 · Reply

  80. Adana Emlak Author Editor

    this is nice.. Good work done.

    October 3, 2012 · Reply

  81. Chat Author Editor

    Superrrrrrrrrrrrrr….

    November 11, 2012 · Reply

  82. Chat Author Editor

    Thanxxxxxxxxxxxxxxxxxxxxxxxxxx

    November 11, 2012 · Reply

  83. Sohbet Author Editor

    Weri Goodddddd….

    November 11, 2012 · Reply

  84. Gaziantep Emlak Author Editor

    thanks for sharing this nice list of jQuery showcase. Good job!

    November 30, 2012 · Reply

  85. Taşımacılık Author Editor

    thank you very macht blog

    January 29, 2013 · Reply

  86. canlı tv Author Editor

    thanks for article.. good content.

    February 7, 2013 · Reply

 

Join the Conversation

Back to Top / Comment RSS

2012 Build Internet. Created by One Mighty Roar. Icons by Komodo Media. Back to Top