Main Points

Unobtrusive Javascript Example 4

This page calls a Javascript file. The onmouseover events which the div in red responds to is in the Javascript file, not this html document. When you mouse over the red div, the menu drops down and it appears (the display is reset from none to block). You can move over the menu and it remains open. The menu div responds to the same event handler as the original div.

//Call the Breakout function when user mouses over div1 or div2
document.getElementById("button01").onmouseover=Breakout;
document.getElementById("menu01").onmouseover=Breakout;

There is now an equivalent set of event handlers for the onmouseout events which call Breakaway. The Breakout and Breakaway functions target the menu div and so require no changes. So while the event handlers doubled in file size to accommodate the second div, the functions require no new code.

I included a second "button" on this page, however it's functionality is derived by copying the code for the first menu and editing it for the settings of the second. The result is a non-object oriented approach and a file size that's twice as large as if there were only one button. And it would grow as large again with every button that you add to the navbar.

Skip to Main Points
<-- Back to 3. Show and Hide a Div
Continue to 5. XHTML Id Detection Subroutine-->