8 Sites with Excellent jQuery Navigation

Excellent jQuery NavigationThis 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.

  • Stumble It!
  • Bookmark It!
  • Tweet it!

About Zach Dunn

Zach is web designer/developer for One Mighty Roar from Massachusetts, USA. Build Internet! is a home for his web and design musings. He is currently studying Multimedia Web Design & Development at the University of Hartford. Want to connect? Follow him twitter for more!

 

46 Responses to “8 Sites with Excellent jQuery Navigation”

  1. jayz

    January 3rd, 2009 at 3:15 AM

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

  2. Joe McCann

    January 3rd, 2009 at 2:57 PM

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

  3. Zach Dunn

    January 3rd, 2009 at 3:00 PM

    @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.

  4. Werehamster

    January 3rd, 2009 at 4:03 PM

    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.

  5. Gerhard

    January 3rd, 2009 at 5:39 PM

    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?

  6. Zach Dunn

    January 3rd, 2009 at 6:16 PM

    @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!

  7. KrazyCeltic

    January 3rd, 2009 at 9:43 PM

    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.

  8. Josh S

    January 4th, 2009 at 12:25 AM

    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

  9. kiran

    January 4th, 2009 at 3:13 AM

    Really Awesome….

  10. ako

    January 4th, 2009 at 5:51 AM

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

  11. Peter

    January 4th, 2009 at 8:17 AM

    @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

  12. pixeline

    January 4th, 2009 at 11:17 AM

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

  13. Chris Raymond

    January 5th, 2009 at 3:11 PM

    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?

  14. Zach Dunn

    January 5th, 2009 at 3:25 PM

    @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.

  15. Tiffany

    January 6th, 2009 at 10:28 AM

    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.

  16. James

    January 13th, 2009 at 9:35 PM

    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?

  17. Zach Dunn

    January 13th, 2009 at 10:01 PM

    @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.

  18. Not Good Design

    January 23rd, 2009 at 3:04 PM

    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.

  19. Bradley Holt

    February 3rd, 2009 at 9:39 AM

    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.

  20. Simple

    February 24th, 2009 at 3:52 AM

    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

  21. Jono

    March 16th, 2009 at 2:02 PM

    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.

  22. Adrian

    April 2nd, 2009 at 7:21 PM

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

  23. Roberto

    May 28th, 2009 at 12:57 PM

    Very good picks. Love the Grooveshark Widgets one.

    Thanks for sharing.

  24. wpdigger

    June 1st, 2009 at 12:20 AM

    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

  25. Webagentur

    June 6th, 2009 at 6:06 AM

    Thank you … this all has me very helped.

  26. Jad Graphics

    June 10th, 2009 at 9:10 PM

    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

Join the Conversation!

CommentLuv is Enabled

CommentLuv Enabled
 

Sponsors