A word from the editors: Whereas modern for its time, this text now not represents fashionable finest practices.
“DHTML” dropdown menus have notoriously concerned nasty huge chunks of JavaScript with quite a few browser-specific hacks that render any in any other case neat, semantic HTML fairly inaccessible. Oh, the dream of a light-weight, accessible, standards-compliant, cross-browser-compatible technique! Enter Suckerfish Dropdowns.
Article Continues Under
To start out, we must always use the very best technique for outlining a navigation thực đơn — an inventory. For this instance, we’ll work on a easy HTML unordered listing. {Line wraps are marked ». –Ed.}
<ul>
<li>Sunfishes
<ul>
<li><a href="">Blackbanded»
sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li><li>Grunts
<ul>
<li><a href="">Smallmouth grunt
</a></li>
<li><a href="">Burrito</a></li>
<li><a href="">Pigfish</a></li>
</ul>
</li><li>Remoras
<ul>
<li><a href="">Whalesucker</a></li>
<li><a href="">Marlinsucker</a></li>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Slender suckerfish</a></li>
</ul>
</li>
</ul>Fairly simple actually — good and neat HTML that, because of this, is very accessible. However now we need to rework this right into a dynamic listing — the primary stage of listing objects will make up a horizontal thực đơn bar from which the second stage lists will drop down.
To get began, all the lists have to be jigged round a bit — particularly, the padding and margin set to zero and the list-style set to none:
ul {
padding: 0;
margin: 0;
list-style: none;
}
Now we have to rework the first-level listing right into a horizontal thực đơn bar. There are a variety of strategies to do that, mentioned intimately elsewhere. We might show the list-items inline (show: inline), however for this instance, we’re going to float them to the left.
li {
float: left;
place: relative;
width: 10em;
}
The place has been set to relative as a result of we wish the place of the second-level, nested lists to be relative to the first-level listing objects and the width has been set to area it out a bit. The dropdown thực đơn is coming collectively.
The following step is to sort out the second-level lists that would be the dropdowns themselves:
li ul {
show: none;
place: absolute;
prime: 1em;
left: 0;
}
This positions the second-level lists completely (pulling them out of the move of HTML right into a world all of their very own) and units their preliminary state to not be displayed. For those who substitute show: none with show: block, you will note the necessity for the highest and left properties in Web Explorer, as a result of with out them, IE will align the second-level lists to the highest proper of their relative dad or mum reasonably than the underside left. Sadly, this IE repair will mess issues up in browsers like Opera, so add the next CSS to reset the highest and left properties on all however IE browsers:
li > ul {
prime: auto;
left: auto;
}
And now, making the sucker work. To make a second-level listing seem when its dad or mum listing merchandise is “rolled over,” we merely want so as to add the next:
li:hover ul { show: block; }
Which says that any listing that’s nested in an inventory merchandise that has the cursor hovering over it needs to be displayed.
Lastly, as a result of the lists are floated left, the content material beneath it must be set freed from the floating by making use of clear: left to it.
“This dropdown malarkey doesn’t work!” I hear 102.6% (or the most recent share being thrown about) of you cry. I’m, as some might need guessed, speaking about Web Explorer customers. The extra you employ and develop with browsers comparable to Mozilla the extra you understand how pathetic Web Explorer may be with regards to net requirements. The :hover pseudo class ought to work with any factor, however in Web Explorer it solely works with hyperlinks. So. What’s the use in a dropdown thực đơn when it solely works on -2.6% of browsers? Not a lot, to be trustworthy. We have to apply a little bit bit extra magic.
DOM-based scripting to the rescue#section5
We’ve established IE’s lack of help for the :hover pseudo class, however by utilizing the Doc Object Mannequin, we will connect mouseover and mouseout occasions to any factor. That is excellent news for us as a result of it signifies that with a easy snippet of JavaScript we will successfully patch IE’s :hover issues.
As a result of IE is blind we have to discover one other option to determine the properties of the :hover pseudo class. With JavaScript, we all know that we will manipulate the className property of a component so what we’re going to do first is alter the CSS:
li:hover ul{ show: block; }
turns into:
li:hover ul, li.over ul{ show: block; }
Now we will invoke the :hover CSS guidelines by including the category over to the specified factor. We additionally want a option to inform IE which of the UL parts on the web page we truly need to be our dropdown menus. We are able to do that by giving an id to our root ul factor:
startList = operate() {
if (doc.all&&doc;.getElementById) {
navRoot = doc.getElementById("nav");
for (i=0; i<navRoot.childNodes.size; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=operate() {
this.className+=" over";
}
node.onmouseout=operate() {
this.className=this.className.substitute(" over", "");
}
}
}
}
}
window.onload=startList;
On web page load, the startList operate is invoked. The operate determines if the browser is definitely IE 5 or higher by checking for the existence of the doc.all object and doc.getElementById operate. This can be a little bit of a crude means of doing it but it surely’s brief and candy — and since we try to make a compact answer, it will do. It then loops by way of, enabling mouseover and mouseout occasions which add and take away the over class from the className property of the factor.
There you've got it. For those who received misplaced anyplace, take a look at a commented, bare-bones instance in motion.
Gills, fins, scales…#section6
Up to now issues are a little bit naked. The thought has been to indicate the fundamental workings of the Suckerfish Dropdown, however CSS could make issues look quite a bit prettier. An apparent start line could be to use a background shade to the second-level lists.
After resetting the highest and left properties as described earlier, dropdowns within the fairly instance seem immediately beneath thực đơn labels in most fashionable browsers, however sadly not in all. In Safari 1.0, they nonetheless drop down from the highest left fringe of the display. {Verify the dialogue discussion board for workarounds. –Ed.}
Additional usability and accessibility#section7
Making hyperlinks out of the first-level listing objects will permit tab-stopping for readers who don’t use pointing gadgets. Pointing these hyperlinks to higher-level pages than the hyperlinks within the dropdowns could be even higher.
