As promised - even if it is a weekend late - the flyout menu now works in IE 6, so, in effect, it now works in "all" browsers. You can see a demo of it by looking at the login link in Dext.

To make it work in IE 6 I had to use JavaScript to duplicate the CSS li:hover pseudo-class. You can see how I did this by looking at the source code. Notice how I used conditional comments to include the JavaScript file only when it's needed (as well as a little IE6-only CSS file). It looks like this:

<!--[if lte IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<script src="js/menu.js" type="text/javascript"></script>
<![endif]-->

In non-IE browsers and IE 7 these two files do not load.

Take a look in the menu.js file. In there is the code that runs in the onDomReady event. It loops each DIV which has a class of "flyout". For each one it finds the immediate parent element (an LI in this case) and adds two events to it — one to show the DIV when the mouse enters the parent LI and one to hide it again when the mouse leaves.

The code relies on jQuery, but, as you can see from the menu.js file, it's trivial to adapt it to run with other libraries, such as Prototype. You could even remove the need for a library and write your own code to add these events. I was being lazy though and assuming most people use one of the many available libraries in your applications. If you use a library other than the two I've coded for and want me to "port" the code just say.

I guess I really ought to port it to Dojo and learn something about that particular library in the process. Whenever I've tried in the past though I've found it a bit like banging my head on a brick wall, which, I guess, is why they chose it to add to Domino ;o)

So, there you have it. Simple and accessible (to a degree) cross-browser menus. What we've looked at so far though is just the browser side of it (although last Wednesday we did look at how to embed the login form in Domino). This week I'll talk about the Domino server side of it and how to build the list of admin links and make them both context and user-sensitive. At the end of the week I hope to make it available as a download.