Sunday, December 02, 2007
Drop-Down Menus, Act III
Blog Entry #96
HTML Goodies' DHTML/Layers sector contains a "Drop-Down Menu" tutorial that predates slightly and prefigures to an extent the rolling menu script of Script Tips #76-78 we've been analyzing in the last couple of entries. The "Drop-Down Menu" tutorial offers a script whose effect mimics the nested drop-down menus that once appeared (but no longer appear) at Microsoft's home page but are still used extensively at Microsoft's MSDN Library; this script, which in its original form only works with MSIE 4+, can be accessed here and is reproduced in the div below:
<html>
<head>
<title>Pull-Down Menus</title>
<style type="text/css">
#menu1 { display: none; }
#menu2 { display: none; }
#menu3 { display: none; }
a:link { color: black; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
</style>
</head>
<body bgcolor="white">
<table border="0" align="left">
<tr>
<td valign="top" width="200">
<span onmouseover="document.all.menu1.style.display = 'block';" onmouseout="document.all.menu1.style.display = 'block';">
<font size="-1"><b><img src="littlex.gif"> Goodies Tutorials</b></font></span><br>
<span id="menu1" onclick="document.all.menu1.style.display = 'none';">
<font size="-1"> <img src="littledash.gif"> <a href="/tutors/frame1.html">Frames</a></font><br>
<font size="-1"> <img src="littledash.gif"> <a href="/tutors/tbl.html">Tables</a></font><br>
<font size="-1"> <img src="littledash.gif"> <a href="/beyond/dhtml.html">DHTML</a></font><br>
<font size="-1"> <img src="littledash.gif"> <a href="/tutors/forms.html">Forms</a></font>
</span>
</td>
</tr>
<tr>
<td valign="top" width="200">
<span onmouseover="document.all.menu2.style.display = 'block';" onmouseout="document.all.menu2.style.display = 'block';">
<font size="-1"><b><img src="littlex.gif"> Great Sites</b></font></span><br>
<span id="menu2" onclick="document.all.menu2.style.display = 'none';">
<font size="-1"> <img src="littledash.gif"> <a href="http://www.straightdope.com">The Straight Dope</a></font><br>
<font size="-1"> <img src="littledash.gif"> <a href="http://www.vhnd.com">Van Halen News Desk</a></font><br>
<font size="-1"> <img src="littledash.gif"> <a href="http://www.dave-tv.com">Dave TV</a></font><br>
<font size="-1"> <img src="littledash.gif"> <a href="http://www.hairclub.com">Hair Club for Men</a></font>
</span>
</tr>
<tr>
<td valign="top" width="200">
<span onmouseover="document.all.menu3.style.display = 'block';" onmouseout="document.all.menu3.style.display = 'block';">
<b><img src="littlex.gif"> <font size="-1">News Sites</font></b></span><br>
<span id="menu3" onclick="document.all.menu3.style.display = 'none';">
<font size="-1"> <img src="littledash.gif"> <a href="http://www.cnn.com">CNN</a></font><br>
<font size="-1"> <img src="littledash.gif"> <a href="http://www.abcnews.com">ABC News</a></font><br>
<font size="-1"> <img src="littledash.gif"> <a href="http://www.usatoday.com">USA Today</a></font><br>
<font size="-1"> <img src="littledash.gif"> <a href="http://www.marketwatch.com">CBS Market Watch</a></font>
</span>
</td>
</tr>
</table>
</body>
</html>Overview
Although you wouldn't know it from looking at the script's demo page, the script's display is housed in a three-row, three-cell table. (We'll see later that the table 'scaffolding' is unnecessary.) Like the Script Tips #76-78 Script's click layer, each table cell holds
(a) an initially visible heading and
(b) an initially invisible set of links.
Unlike the click layer links, the table cell links do not occupy any space on the page; this is because the table cell links are wrapped in span elements whose CSS display property is set to none:
#menu1 { display: none; }
#menu2 { display: none; }
#menu3 { display: none; }
/* These rules can be more compactly written as:
#menu1, #menu2, #menu3 { display: none; }
CSS selector grouping is discussed here. */
The table cell headings are themselves wrapped in span elements equipped with onmouseover/onmouseout commands that drop down their links, for example:
<span onmouseover="document.all.menu1.style.display = 'block';" onmouseout="document.all.menu1.style.display = 'block';">
Moving the mouse cursor over the Goodies Tutorials heading pops out the links in the id="menu1" span element by setting the menu1 CSS display property to block, which, as you might guess, displays the links with a block-level rendering, e.g., newlines (\ns) are inserted before and after the links. Contra the tutorial, the display block value does not serve to negate the menu1 display none value that is set in the script's style element.
The onmouseout attribute is redundant; if we delete it, the link menu won't go away if the mouse cursor is moved away from the menu.
In turn, each link-containing span element is equipped with an onclick command that pulls up its link menu when the user clicks in the span region anywhere but on the links, e.g.:
<span id="menu1" onclick="document.all.menu1.style.display = 'none';">
From MSIE-specific to cross-browser
You have probably figured out that it is the script's use of the all collection in the onmouseover/onmouseout/onclick commands that makes it MSIE-specific. We first encountered the all collection in the color creation script of Script Tips #65-67 and correspondingly discussed it in detail in Blog Entry #85. Microsoft's all collection page shows that the all syntax here is not quite standard: the menu# span elements should be referenced with document.all("menu#") and not document.all.menu#.
Anyway, all that is necessary to make the script work with other (current) browsers is to replace each document.all.menu# reference with a document.getElementById("menu#") reference - it's that simple.
The Microsoft menu interface
Joe's menus and the Microsoft menus that inspired them actually have different user interfaces. Both sets of menus preface their headings with small 'plus' (
) images and their links with small 'minus' (
) images. However, Microsoft's menus are not displayed/vanished via a mouseevent interface; rather, the Microsoft menus(a) are dropped down by clicking on the heading
images, which are 'flipped' to the images when the links display; and(b) are pulled up by clicking on the heading
images, which toggle back to the images when the links vanish.Below I'll show you how to replace Joe's mouseevent interface with the Microsoft interface if you'd like to do that, but let me get some style stuff out of the way first...
A style sheet for the "Drop-Down Menu" tutorial script
body { background-color: white; }
table { border: 0; }
td { width: 200px; vertical-align: top; }
h4 { display: inline; }
#menu1, #menu2, #menu3 { position: relative; left: 25px; }
a:link { color: black; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
Comments
• The HTML 4 Index of Attributes shows that the bgcolor attribute of the body element, the align attribute of the table element, and the width attribute of the td element are all deprecated.
• My preference is to simply remove the table element's align="left" attribute and not replace it with any style declarations (e.g., float:left;) because the script's table is by default left-justified.
• I find that simply removing the td elements' valign="top" attributes does not affect the script's effect (so the td vertical-align:top; declaration is probably unnecessary).
• The style sheet doesn't have a rule replacing the <font size="-1"> elements, which produce text too small for my tastes.
• We will below mark up the boldened menu headings with h4 elements, whose default block-level rendering is switched to inline by the display:inline; declaration above (technically, this declaration puts the h4 elements in the same CSS line boxes that hold the
images). If you're uncomfortable with skipping the h1-h3 heading levels, then you can alternatively mark up the headings with strong elements, which are inline by default and are typically rendered with a bold font weight.• Joe gives each menu link a five-space indent via a series of entity references, whose effect is smoothly reproduced by applying position:relative;left:25px; declarations to the menu# span elements.
• The menu# span elements' initial display:none; properties (vide supra) will be written in a script element (vide infra).
Click it
We're now ready to supplant Joe's mouseevent menu interface with the Microsoft click interface described earlier. We begin by recoding the first table cell as:
<td>
<span id="menu1">
</span></td>
The script's original href values for the Frames, Tables, DHTML, and Forms links are not current but are functional; the code above updates them. Joe's littlex.gif (
) and littledash.gif () images can be accessed at http://www.htmlgoodies.com/images/littlex.gif and http://www.htmlgoodies.com/images/littledash.gif, respectively. Lastly, there's no need to prevent line-wrapping before the menu heading, so I've replaced the reference between the littlex.gif image and the heading with an ordinary space.The second and third table cells can be recoded analogously. Next, place the following script element after the third td element:
<script type="text/javascript">
document.getElementById("menu1").style.display = "none";
document.getElementById("menu2").style.display = "none";
document.getElementById("menu3").style.display = "none";
function displayx(num) {
if (document.getElementById("menu" + num).style.display == "none") {
document.getElementById("menu" + num).style.display = "block";
document.getElementById("image" + num).src = "littledash.gif"; }
else {
document.getElementById("menu" + num).style.display = "none";
document.getElementById("image" + num).src = "littlex.gif"; }
}
</script>
A single displayx( ) function handles all three menus. In changing the menu# displays from none to block, I find that the original menu1, menu2, menu3 { display:none; } style rule is not recognized by the script element; the displayx( ) if condition returns false on the first click because its document.getElementById("menu"+num).style.display expression evaluates in this case to an empty string (the expression is subsequently set to none by the else block, after which the script works normally). At least on my computer, the if condition only returns true on the first click if the menu# displays are set to none in the script element.
And that'll do it - try it out in the div below:
Goodies Tutorials |
Great Sites |
News Sites |
(Regarding the Great Sites menu, you'll get no argument from me that Cecil Adams' The Straight Dope is indeed a great Web site, but as for the Van Halen News Desk, Dave TV, and Hair Club for Men, well, I thought other link choices might be more appropriate. I have also restocked the News Sites menu with some different links - why not?)
In looking at the indented links, perhaps you are thinking, "Can't we use list elements to code these menus?" Indeed we can, and we'll restructure the script with a nested list 'chassis' in the next post.
reptile7
- posted by A. Peak @ 12:41 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)