Suckerfish Drop Down Menus with WordPress

Today we are going to answer a common question regarding WordPress navigation. How to create simple drop down menus that work across browsers. If you are at all familiar with the web standards approach, then you have probably heard of Suckerfish Drop Downs.

http://htmldog.com/articles/suckerfish/dropdowns/

Integrating this is mostly CSS, but here is the WordPress code to get us started:

[sourcecode language=’php’]

[/sourcecode]

That code gets our menu started in the standard WordPress way. We just added in the sort by menu order code so that you can control your page order. Also the depth of 3 is set because that is as far out as we are taking our CSS, so it wouldn’t make sense to let our HTML break it.

Now to get the basic CSS in place:

[sourcecode language=’css’]

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
clear: left;
color: #ccc;
}
[/sourcecode]

Now we have it working in all browsers except IE6 (which doesn’t properly support :hover). To support IE6 We need to add a few lines of JavaScript:

[sourcecode language=’JavaScript’]

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);

[/sourcecode]

That’s it!

2 thoughts on “Suckerfish Drop Down Menus with WordPress”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>