The case against using drop down menus:
http://www.zeldman.com/daily/0604f.shtml#ala184
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:
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.
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.