Grandson of Suckerfish?

A combination of Son of Suckerfish and TJKDropDown Menu

I've used Son of Suckerfish dropdown menus on a few sites recently as it's the simplest and most accessible CSS-based dropdown menu solution around at the moment.

It works in most browsers and gets around Internet Explorer's lack of support for the li:hover pseudo-class by mimicking it with a few lines of JavaScript.

The only thing I don't like about Son of Suckerfish is that when using keyboard navigation (tabbing), the dropdowns don't open on focus.

Looking around on the 'net for a solution, I came across the TJKDropDown Menu which opens the dropdowns when navigating using the mouse or the keyboard.

Looking at the TJKDropDownMenu Javascript, all I needed to do to create a drop-in replacement for the sfHover JavaScript was to change one of the classNames from msieFix to sfhover and add the window.onload = SetEvents; event at the bottom!

Adding class="trigger" to the top level list items in the menu's markup completed the job.

I now have an even more accessible dropdown menu which can replace my current Son of Suckerfish menus with very little effort!

Is this the Grandson of Suckerfish?


The menu in action:

menu markup HTML Dog

The markup:

<ul id="nav">
<li class="trigger"><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>
</li>
<li class="trigger"><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<li class="trigger"><a href="#">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>
</ul>

The CSS:

#nav,#nav ul {
padding: 0;
margin: 0;
}
#nav ul {
position: absolute;
left: -999em;
margin-left: -1px;
border: 1px solid #765;
background-color: #ECE9D8;
}
#nav li {
float: left;
list-style: none;
margin-right: 2px;
border: 1px solid #765;
}
#nav ul li {
clear: left;
margin-right: 0;
border: 0 none;
}
#nav li:hover ul,#nav li.sfhover ul {
left: auto;
}
#nav a,#nav a:link,#nav a:visited {
display: block;
width: 8em;
padding: 2px 5px;
color: #765;
background-color: #ECE9D8;
text-decoration: none;
}
#nav a:focus,#nav a:hover,#nav a:active {
color: #728C40;
background-color: #FDFDFC;
text-decoration: underline;
}

The Javascript:

<script type="text/javascript">
function swap(){this.className="sfhover"}
function swapBack(){this.className="trigger"}
function swapfocus() {this.parentNode.parentNode.parentNode.className="sfhover"}
function swapblur() {this.parentNode.parentNode.parentNode.className="trigger"}
function SetEvents(){
if (document.getElementById){
var LI = document.getElementsByTagName("li");
var zLI= LI.length;
for(var i=0;i<zLI;i++){
if(LI[i].parentNode.parentNode.className=="trigger"){
LI[i].firstChild.onfocus=swapfocus;LI[i].firstChild.onblur=swapblur
}
if(LI[i].className=="trigger"){LI[i].onmouseover=swap;LI[i].onmouseout=swapBack}
}
}
}
window.onload = SetEvents;
</script>

javascript based on the TJKDropDown Menu TJKDesign

Update

As the drop-downs won't open in Internet Explorer if Javascript is disabled, I added some conditional CSS inside a noscript element so that the drop-down menus are displayed opened:

<!--[if IE]>
<noscript>
<style type="text/css">
#nav ul{position:relative;left:0;margin-left:0;border:0 none;}
</style>
</noscript>
<![endif]-->

Comments on this article can be left here.

Update

Additional code to convert the above menu to a three level drop-down.