A jQuery powered HTML5 navigation menu

I was recently asked to knock-up a semantically simple (but elegant) navigation bar for a new open-source project I’ve become involved with (more on that soon!). Having done so with a reasonable amount of success, I thought I would also share it here for everyone else to use as well!

It’s an absolute snap to implement, with the addition of one simple class to the top-level HTML5 nav element a fully styled and accessible navigation menu will be produced. The menu also utilises the jQuery JavaScript library for it’s animation and the addition of some unobtrusive presentational elements.

There’s more detail on how to use the menu contained on the demo page. But in essence, it is as simple as creating a series of nested unordered lists. No more than that.

As always, if you have any questions or problems please leave a response here and I’ll be happy to help. You can also fork this project on github if you want to tinker with it or make some improvements.

It’s been tested in all modern browsers and functions perfectly. It does degrade relatively nicely in IE7, but don’t expect unicorns and rainbows. No IE6 support, because frankly: fuck IE6.

P.S. It’s available in four snazzy colours!