Dynamic JavaScript Navigation

Time to finish up what I started.

I present for your approval: Dynamic Tree-Structured Navigation written in JavaScript

Now this is not some high-tech government technical thing like you may all be thinking... oh wait, it is :) I took out pretty much everything that could give away any associated meaning, so all that is left is the navigation menu. That's it. It's a big navigational menu. Trust me.

What?

Imagine a massive, tree-like, hierarchical navigational system — you know, like a large DOM tree or XML file. This script stuffs that array (four-dimensional in this case) into a JavaScript data structure, and then draws the navigation on-the-fly by parsing it.

Why?

The array is easier to update than, say, 500 individual HTML files. And because one of the requirements for this particular project is that the entire website is self-contained, I couldn't do any of the script stuff on the backend, which explains why it's all in JavaScript.

Whhaaaat?

It uses a collapse/expand type of architecture like many other DHTML menus. This saves browser space, and can fit a lot of information into a tighter area. Some file icons have a checkmark next to them, if you view the source, you'll notice that you can specify two different types of bottom-level files (in this case, a regular document, and a quiz). It makes it a bit more useful in situations that I probably didn't even think of.

This took me about two and a half days at work, and it definitely would have taken me less than a day if the last time I looked at JavaScript wasn't like 8 months ago. Ofcourse I write PHP all the time, so adapting syntax back to client-side stuff was a breeze :)

I actually put some thought into the copyright notice at the top of the page (in the source code) in light of what happened to Joshua and his cool tabbed navigation. I realize that you could theoretically do whatever the hell you want with the code and not tell anyone I originally wrote it, but please be nice and respect the rules I wrote. They're not that brutal :)

Comments

[jarrod]

Beautiful work Mike, great job! What type of license you got on that thing, I can think of a great dozen or so places I could make good use of it already ;)

[Mike]

I'll set you up with a pricing plan. I think it'll be something like "3 uses and 1 author" costs you ..... oh wait, that's a different app :)

Thanks for the praise, always good to hear!

[Nicole]

Way OT: Any idea why Typepad sites have been so slow the last couple weeks?

[Mike]

No idea, I only know that I notice it constantly.

[Jakob]

Very effective, and very simple. For something that has to be self-contained, it doesn't get much more exact.

OT: For some reason, I keep getting nasty JavaScript errors when I press tab on your site. (I blame my newsreader...)

[gulliver]

Good looking menu.

I'll be happier if the section title can be clicked to revert to the closed state - it currently doesn't on my Mac.

[Rob Cameron]

Hmmm ... am I missing something? Because I could have sworn I've seen Javascript, tree-based menus like this for the past 5 years. :)

Not trying to be a smart-aleck, just want to understand!

[Mike]

Haha, no Rob, you're not missing anything.

Some of the good tree-based nav scripts are tough to find (which is why I wrote my own). Plus mine is all done with nested unordered lists all styled with CSS, which you don't find everyday — usually people use table-hiding DHTML.

Sometime this summer I'll be redoing this with XML and XSLT, so hopefully that will be a little more original for ya ;)

[Mike]

Hey Gulliver, I just changed that in the "real work version" I've been sweating over. When the whole project is done here (a month or so, at least) I'll post a completely finished version of the nav.

The reason why I initially made it so that the main sections could not be opened (by more than one at a time) was because in the actual implementation of this navigation, the array held 500+ nodes. We didn't want any users expanding the menu below the viewport of the browser window, which is why I made it so that only one could be opened at a time. Since then, we've rethought that strategy though.

The version here has nicer graphics, nicer colors, and is more "polished" — expect it sometime this summer.

[Sam]

It would be far more trendy to configure the navigation with <ul class="nav"> :)

Apart from being trendy, it also slightly easier to use, in particular it makes it easier to replace existing navigation elements in a page.

I made a tree widget in this manner and was able to gleefully throw trees into a previously drab application.

But, don't think I'm being original in saying this - it was all his idea.

[Mike]

Hey Sam, thanks for the comment (I fixed the markup and deleted second one, I hope that's okay!).

I use this navigation at work, and had to chomp out certain bits of it in order to keep it declassified — the courses_menu ID and other random IDs are remnants from the real usage. At some point I'll rewrite it so that it makes sense to the average viewer. But right now I'm neck deep in Business Logs stuff, so you know :)

[Mike]

Thanks buddy, I don't know if you're comment spam or not, but I still appreciate it!