So I have had the DISTINCT pleasure of implementing a “new & innovative” navigational control from the brilliant minds of our Creative department at work. Let me lay down a little bit of the ground work of how this surfaced:

Creative doesn’t want navigation to fall below the fold. They don’t want there to be any natural scrolling on the site. Apparently the built in scroll bars in all the browsers just aren’t “creative” enough for there taste. They also want to represent the hiearchy of the sub navigation via a tree structure (hence the Tree). On top of that, they don’t want to confuse the user with showing anymore than one element at a time. So when one parent is invoked all other expanded parents are collapsed(hence the Accodian).

If this wasn’t brilliant enough, remember the first concern.. don’t want to see a scroll bar even though we are jamming 100 links in 4 sections in the sub navigation. So, the last requirement is if one of the “panes” in the accordian section is larger than X height we want to allow them to scroll within the pane.

Which leaves us with a Scrollable TreeCordian which I wrote using MooTools 1.21b.

Check Out My Example, & Feel Free to Review Code w/ Ways to Improve!

So I’ve been doing a lot with MooTools JavaScript library for about 10 months now. From beta to now 1.21b. And, it is my favorite framework of choice. So, I will be building a collection of components and Moo plugins for the world to use to share my love and gee!

Look for them to come soon!