Alpine CSS-Based Flyover Navigation

Flyover Research: The Case Against Drop Down Menus

flyover navigation, research, usability problems

The case against using drop down menus:

http://www.zeldman.com/daily/0604f.shtml#ala184

CSS Flyover Navigation: A Proof of Concept

flyover navigation, css tips, web standards

Ladies and gentlemen, I believe we have it. We should start calling it something besides "flyover" navigation because I grow weary of that word... I do like "drop down menu" for top-level stuff, and "side menu" for side-level stuff, and I'm sure we can come up with better names than that... like The Bootsy Collins Menuing System or The P-Funk All-Star Navigation or The Zestified Shock and Awe Listing Mechanism or The Mighty Mighty Tighty Whitey UI.

Anyways, this is pretty cool. It has been tested and works in IE 6.0, Mozilla 1.7, Firefox 1.0 and Opera 7.5. I'm sure ya'll are wonderin' if this is better than our old flyover navigation, and let me assure you that it most certainly is. Let me give you 10 hot and spicy reasons why:

  1. It's compatible with our new advanced navigation package (of which, there are working plans for it to gain intelligence and take over the world and enslave all of mankind)
  2. It's super fast and super lightweight, as it runs off a simple unordered HTML list and a snip of CSS code. Rick's fortune cookie today said that, "World domination does not come easy to he who is fat and loagy."
  3. It works in good browsers browsers (Mozilla, Opera, Firefox) even when JavaScript is turned off.
  4. It uses forward-compatible, standards-compliant code. And standards isn't a dirty word.
  5. It is easy to customize the navigation's look-and-feel to match sites of all stylistic persuasion.
  6. Because of its striking similarities to our existing navigation package, it should be easy for us to offer The Bootsy Collins Menuing System as an upgrade for existing clients, and as a feasible offering for potential clients.
  7. Yes Virginia, it works in Internet Explorer.
  8. Something. I forget.
  9. It won't lose your socks in the dryer.
  10. Open source and free. Free as in beer.

So with that, I'm sure you wanna see it. Wanna see it? Sure you wanna see it:

http://12.108.1.166/flyover/quickstart_one/

That's a good start. ...but what if we want two levels of subnavigation? Done and done, my good man:

http://12.108.1.166/flyover/quickstart_two/

Alright. That's pretty sweet, but what about gross navigational obscenity? How about three levels of subnavigation? Are you (wo)man enough to stand the intensity? CAN YOU SMELL WHAT THE ROCK'S COOKIN'?

http://12.108.1.166/flyover/quickstart_three/

I could keep goin', but I'm sure ya'll get the point.� Main navigation is accessible but sub navigation doesn't work in IE 5.x for Mac, which is an issue that demands more research. It looks like it is haveing trouble with a snippet of JavaScript that IE5, IE5.5 and IE6.0 require to enable hover states.

Maintaining Code for CSS Flyover Navigation

flyover navigation, javascript, css tips, escape characters, maintenance

A few notes, if you ever find yourself working with the page designs for OAR (and likely many page designs of sites to come, as these are techniques that are probably here to stay).

1. The flyover navigation depends on a snippet of JavaScript that tricks Internet Explorer into working as a web browser. Wonderfully, this JS code uses a few escape backslashes \ to get IE (and other browsers) to process correctly. The desired code is as follows:

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
��� var sfEls = document.getElementById("topNav").getElementsByTagName("LI");
��� for (var i=0; i<sfEls.length; i++) {
������� sfEls[i].onmouseover=function() {
����������� this.className+=" sfhover";
������� }
������� sfEls[i].onmouseout=function() {
����������� this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
������� }
��� }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Of particular note is the RegEx command (" sfhover\\b"). We want two backslashes in there, but when we upload data to our system it strips and replaces our backslashes. If we just upload the code with sfhover\\b, both slashes will be stripped out and replaced with nothing, which will blow up the flyover menus in every browser.

To get the code to work right, use five backslashes (sfhover\\\\\b). When our system processes the code, it will leave behind two backslashes. Every time you edit the page design be sure to add these extra backslashes or else the system will strip them all out. Every time. Got it? Good.

The other place for potential backslash problems is in the global.css file. Since IE 5.2/Mac has finicky tastes, I need to exploit its flaws and pass a few custom styles to keep the site from blowing up. Near the very top of the CSS file I have this declaration:

/*\*//*/
@import "/ie5mac.css";
/**/

That's how it's supposed to look. However, to deal with stripped backslashes you need to make sure you upload/save the file like so:

/*\\*//*/
@import "/ie5mac.css";
/**/

One slash will get stripped and the other will remain, and everything will still work in IE 5.2/Mac. If you don't save the file with two slashes, they will all disappear and bad things will happen. Make this change, and make this change every time you edit the file.