The “Innovative” TreeCordian

30Apr08

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!



8 Responses to “The “Innovative” TreeCordian”

  1. 1 Jani

    Sounds fun!

    The “Innovative TreeCordian” is actually quite nice – but the reasoning behind it is… retarded. 😀

  2. Good job. That’s a nice looking scrollbar to end scrolling(?!)

    I look forward to you implementing an entire site in that size of window because your design team thinks it’ll be better for handheld browsers. Good luck with that!

    Oh, also, it doesn’t work on Konqueror. Not that anything cool does but thought I’d mention it.

  3. Haha, well I am flattered you guys like the widget… and trust me I know how broken it is in design! Thanks for the compliments & comments thus far, I’ll amend the post tomorrow morning once Creative & “UX” take a crack at it. Should be interesting.

  4. 4 commissionblueprints

    That’s a really cool nav widget.

    I can totally understand why “Creative” would need something like that.

    In fact, it’s not completely dissimilar to the Vista Start Menu – with specific dimensions for the links “container” you can design around it and put it as many links as required, never having to worry about breaking the design.

    Nice! Great work.

  5. It doesn’t work. I get an error. Please give me a wink when your script works again…

  6. 6 user

    404 for example

  7. 7 Charles Scott

    Still gives me a 404

    • Yes, I am going to be working on a new php4/php5 stable version to release. Please wait for the update.


Leave a reply to Léonie Cancel reply