Tuesday, February 20th, 2007
ColumnNav: Think Apple Heirarchical Menus
David Lindquist has created a new component for YUI called ColumnNav.
ColumNav is a hierarchical menu implementation utilizing Bill Scott’s Yahoo UI Carousel component. Content is loaded from an unordered list (in the form of a DOM object) and displayed in a scrollable viewport, similar to Column View in the Mac OS X Finder. Features include:
- infinite extensibility using Ajax to build sub-menus
- a highly customizable look and feel using CSS
- support for keyboard-only navigation (CTRL + arrow keys)
- cross-browser compatibility
It looks good and simple to use.
4.3 rating from 36 votes
It would be very cool to see this code used to make a three pane browser along the lines of the three pane view in finder (the original NeXT step file browser view).
Brilliant! And I agree with Torgeir… it’d be great to make the widget expandable to more than one column at a time.
Working on it as we speak. ;)
Uh, nice! That really looks promising! Also it would be nice with action keys to browse left and right!
I like this, but I also really like the look of this one too, implemented with JQuery:
http://labs.activespotlight.net/jQuery/menu_demo.html
Click “Toggle Menu” at the top :)
Ryan, that JQuery version is very cool!
Leland and Torgeir, I just updated ColumNav to version 0.9.4, with support for multiple columns.
Now I’m sort of annoyed that I just wrote a column-view file browser over the last few days.
Interesting. Here are other similar looking interfaces for inspiration:
and
Grazr, in particular, is looking pretty slick nowadays.
Oops (my links disappeared, must have been the fish tails):
http://eurekaman.com/opod/v0.1/
http://grazr.com/
Old post, but I thought I would announce the recent release of ColumNav 1.0. It has matured quite a bit since the initial release. Check it out:
http://stringify.com/columnav/