Flash to Javascript: One Menu's Journey

In the process of creating the new websites for ApacheCon US 2007 and OS Summit Asia 2007 I was tasked with taking the Flash navigation menu as seen on the ApacheCon EU and turn it into something more palatable for the Apache community. So I set out to create a new navigational menu that

• Replicated the same functionality of the Flash version in Javascript
• Gracefully degraded for non-Javascript clients
• Worked for all major browsers: IE, Firefox, Safari, Opera, and of course links

For the ApacheCon US site, I took the following approach:

• The navigational menu starts as a div at the bottom of the page.
• The menu links just below the banner point to sections of the nav menu at the bottom. Without Javascript, this is how the navigation works. It’s simple and functional.
• If you have Javascript turned on, the site loads up an initial script that adds an extra CSS page. That means this CSS style is used only for Javascript enabled clients.
• This extra CSS hides the nav menu at the bottom of the page and changes the overflow of the sponsor menu from scroll to hidden. This means that without Javascript, clients can scroll through the list of sponsors manually. With Javascript, the sponsor menu scrolls automatically so we hide the scroll bar.
• There is a hidden div that overlays the banner image. This hidden div functions as a sliding menu. The animation is done via MooTools
• When you click on a menu link below the banner, the Javascript populates the sliding menu by copying the menu elements from the now hidden lower navigational menu.

For the OS Summit Asia site, I wasn’t nearly as clever. I initially tried the same approach, but because this site has multiple div layers over the photo banner, the sliding menu approach simply didn’t work across browsers well. So I switched to a different form of sliding menu, where the transparent tagline section scrolls horizontally to the appropriate menu. I don’t have any fancy rewriting of the DOM in this case.

This scrolling menu works fine with one exception: it doesn’t gracefully degrade. At least not yet. I wanted to use the same trick I had for the sponsor marquee—start with an overflow set to scroll and change it to hidden with an extra Javascript loaded CSS. This meant that Javascript disabled clients could manually scroll through the menu. The problem with this approach is that Safari doesn’t respect the new CSS overflow property. Safari clients still get the scroll bars even with Javascript turned on and it looks horrible. I’m still thinking about how to fix this one. I could do some DOM rewriting again, but I believe I can come up with a better solution.

It’s still a shame how much effort cross-browser websites require, particularly if you want a validating, accessible site that’s more than just plain text. At least IE didn’t cause me too much trouble. Still, I tend to spend way too much time on trial and error, particularly with CSS. Maybe that’s just my own lack of skill as a web designer. Maybe it’s because I like to hand write my sites. Both sites were done completely in emacs, from the ruby to the html. I used Inkscape, the Gimp, and OmniGraffle for image work.