November 23, 2005

MochiKit, DOM and Navigation Bars

Filed under: ResearchAndDevelopment — Ryan Wilcox @ 11:58 pm

In web design it is customary to include a navigation bar somewhere on your pages. Links on this navigation part point to other points on the site. This site, for example, provides Home, About Us, Products, Bugs, Wiki, and Blog.

It is nice to somehow highlight what section the user is currently on. You’ll see there is no “Blog” link in the title bar, it is a static (unclickable) text instead. This is how I show location – your visiting the Blog section of my site, so it’s different from the other links provided in the navbar

My first Content Management System was the static site generation of Userland Frontier, which did navbar generation extordinarily well (or so I thought at the time.) When I started designing I thought back and realized I wanted some sort of automated system to take care of navbar generation.

The Wilcox Development Solutions site was created by hand, just my friend BBEdit and a good CSS book. BBEdit has this feature where it can run included scripts, so I wrote a Python script to generate my navbar, given an XML file input

While this 200 line Python script works, it’s kind of annoying. First, it requires some special Python modules. Secondly, you need(ed?) to specify the full path to the script (assuming it lived outside the site’s tools folder, which this script did). This second requirement meant that every person who touched my site would need to change all of the paths to match their machine configuration. A find and replace all operation, but still annoying

The other day I got wondering if I could duplicate my statically-rendered-via-Python navigation bar with some clever Javascript… Read on for The Rest of the Story…