my nav list
Well, amazingly, I’ve had several people email me and ask me “How’d you do that?” - in regards to the navigational menu on the left side of the screen there. It’s actually very easy. It’s based upon HTML Dog’s Son of Suckerfish dropdowns. The nav list over there is probably about as simple an implementation of the SOS menus as you can get.
Since it’s based from something that is fairly well-known (and widely used) I’m not going to bother to explain a whoile bunch about what makes it work and all that. You can read up on the HTML Dog website on that all you like 
But I will post the bare-bones code that I’ve used on this site, and you can copy and edit it to fit your own needs as you so desire. The code below does have some “prettiness factor” built in, but it’s very basic and easily changed.
So, without further ado…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="Aneko Studios - www.anekostudios.com" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<script type="text/javascript" src="sfhover.js"></script>
<style type="text/css">
#nav {
width:7em;
margin:0 auto;
}
#nav li, #nav li.bottom {
display:block;
list-style-type:none;
line-height:2em;
}
#nav li {
background:url("underline.gif");
background-repeat:repeat-x;
}
#nav li.top {
background:transparent; /* to remove the background image from the firt list item*/
}
#nav li a, #nav li a:link, #nav li a:visited, #nav li a.hover, #nav li a:active {
color:#23446D;
font-family:"Trebuchet MS", sans-serif;
padding-left:1em; /* to make room for the arrow that appears on hover */
}
#nav li a:hover, #nav li a:active {
background:url("arrow.gif");
background-repeat:no-repeat;
background-position:0 0.5em;
}
#nav li ul {
display:none;
}
#nav li:hover ul, #nav li.sfhover ul {
display:block;
margin-left:-1.5em;
}
#nav li:hover ul li, #nav li.sfhover ul li {
background:none;
}
#nav li:hover ul li a, #nav li:hover ul li a:visited, #nav li:hover ul li a:hover, #nav li:hover ul li a:active, #nav li.sfhover ul li a, #nav li.sfhover ul li a:visited, #nav li.sfhover ul li a:hover, #nav li.sfhover ul li a:active {
padding-left:1em;
}
</style>
</head>
<body>
<ul id="nav">
<li class="top"><a href="#" onfocus="blur();">Link Item 1</a></li>
<li><a href="#" onfocus="blur();">Link Item 2</a>
<ul class='children'>
<li><a href="#" onfocus="blur();">sublink 1</a></li>
<li><a href="#" onfocus="blur();">sublink 2</a></li>
</ul>
</li>
<li><a href="#" onfocus="blur();">Link Item 3</a>
<ul class='children'>
<li><a href="#" onfocus="blur();">sublink 1</a></li>
<li><a href="#" onfocus="blur();">sublink 2</a></li>
</ul>
</li>
<li><a href="#" onfocus="blur();">Link Item 4</a></li>
<li><a href="#" onfocus="blur();">Link Item 5</a></li>
<li><a href="#" onfocus="blur();">Link Item 6</a></li>
</ul>
</body>
</html>
Now, if you notice, there’s a small script up there in the header, called “sfhover.js”. As the SOS menus indicate, this script is necessary to make the dropdowns function in Internet Explorer. Internet Explorer does not recognize the :hover pseudoclass on anything but anchor links. Since this menu is dependent upon “li:hover” elements, you need the javascript to force IE to recognize the pseudoclass on something other than regular links.
The neat thing about this solution is that, if javascript is turned off, the main nav items are still visible and clickable, so you can still route your users to the content they want - it just doesn’t have the neat little expansion thing going on there.
The script file in question contains the following:
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);
Just save that in a text editor as “sfhover.js” and you’re set.
A side note: the above script has been very useful throughout my design travels. You can change it as you need to for different elements. For example, say you have a paragraph that you want to highlight on hover for some reason. Change the section “getElementsByTagName(”LI”);” to “getElementsByTagName(”P”);”, and assign a class “p.sfhover” in your stylesheet, and you can accomplish this. It’s very versatile and so easy to use for small things like that!
Posted by
August 4th, 2006
