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
2. Grooveshark Widgets
http://widgets.grooveshark.com/
3. Aviary
4. WP Coder
5. Matt Dempsey
http://www.mattdempsey.com/work.php
6. Bright Creative
http://www.brightcreative.com/portfolio/
7. Red Crown Studio
http://www.redcrownstudio.com/
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!
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.
Discussion
January 3rd, 2009 at 3:15 AM
excellent, i hope i can make like or better like that..
thx for your information
January 3rd, 2009 at 2:49 PM
Great list!
January 3rd, 2009 at 2:57 PM
Wow, Carrot Creative…11 Megabyte home page, page weight! Ouch…
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.
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.
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?
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!
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.
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
January 4th, 2009 at 3:13 AM
Really Awesome….
January 4th, 2009 at 5:51 AM
Impressive stuff, jquery is mandatory knowledge for web developers these days…
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
January 4th, 2009 at 11:17 AM
this interactive barcode image gallery is also made entirely in jquery: http://www.lisapram.com
January 4th, 2009 at 3:04 PM
Great list!!
Check out http://wpesp.com
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?
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.
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.
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?
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.
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.
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.
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
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.
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
May 28th, 2009 at 12:57 PM
Very good picks. Love the Grooveshark Widgets one.
Thanks for sharing.
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
June 6th, 2009 at 6:06 AM
Thank you … this all has me very helped.
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
July 3rd, 2009 at 12:36 AM
Looks very interesting. Thanks for sharing..
http://www.mpos.net/s/p4.asp
November 6th, 2009 at 7:44 AM
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 29th, 2009 at 2:45 AM
thanks for the list,
I am still learning jQuery
December 17th, 2009 at 1:49 PM
Wow, this is very cool and I can that good needed.
January 19th, 2010 at 5:21 PM
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 28th, 2010 at 3:57 PM
Well done, good choise. This is really helpful
March 7th, 2010 at 2:15 AM
good collection thanks
March 12th, 2010 at 8:43 AM
thanks all )
August 8th, 2010 at 3:59 AM
thanks for the list..
really help for newbies like me.. :)
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.