If you spend any amount of time on Yahoo domains these days (Sports or Movies, for instance), you surely have seen Bill Scott’s nifty Carousel component widely employed. And rightly so, as it is a very compact and intuitive means of navigating a series of things. It’s fun too. I find it mildly addicting to click on the arrows and see the content slide gracefully into place.
You can see a similar effect in certain Apple software, most notably on the iPod and in the Column View option in the Finder. In those interfaces, the effect is used for easily navigating menu hierarchies, with the sliding motion providing continuity with where you were before, higher up the tree.
A few days ago, I began thinking that it might be nice to use the Carousel component to imitate such a menu system on a web page. And, thanks to a bout of vertigo that kept me on the couch most of this past weekend, I hammered it out.
I call it ColumNav, in reference to its Column View inspiration. Features include:
- easy setup using standard unordered lists
- infinite extensibility using Ajax to build sub-menus
- customizable icons
- cross-browser compatibility, based on the widely-tested Yahoo UI Library
The full documentation provides more information, along with examples and a download link. Feedback is always welcome.
Enjoy.
