Easy Dropdown Navigation by eckert
Here’s how to get dropdowns in your navigation.
First, you are going to need this bit of code in your <head>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
if (!document.getElementsByTagName) return false;
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);
//--><!]]></script>
Next, you are going to to set up the navigation. Check out the example code, then read the description of what it means below:
<div id="catnav">
<div id="nav">
<ul>
<li><a href="http://yourdomain.com/">Home</a></li>
</ul>
<ul>
<li><a href="http://yourdomain.com/page1/">Page One</a>
<ul>
<li><a href="http://yourdomain.com/page1sub1/">Page One Sub One</a></li>
<li><a href="http://yourdomain.com/page1sub2/">Page One Sub Two</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://yourdomain.com/page2/">Page Two</a>
<ul>
<li><a href="http://yourdomain.com/page2sub1/">Page Two Sub One</a></li>
<li><a href="http://yourdomain.com/page2sub2/">Page Two Sub Two</a></li>
<li><a href="http://yourdomain.com/page2sub1/">Page Two Sub Three</a></li>
</ul>
</li>
</ul>
</div>
</div>
The first HOME link has no dropdown, just the initial link. The next cluster has a main link and then 2 sub pages in the dropdown and the last one has three sub links.
You can modify the link paths and how many dropdown sub links that you require. Just make really sure that the first part of the code cluster starts with an <li>, but the ending </li> doesn’t come until the bottom of the cluster. This has screwed me over a couple of times and I’ll save you the trouble.
The last thing you will need is the CSS.
#catnav {
padding: 0;
clear: both;
height: 32px;
width: 1000px;
background: #000;
position: absolute;
top: 85px;
z-index: 100;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 100;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
#nav a {
display: block;
line-height: 32px;
margin: 0 20px;
padding: 0;
font-size: 14px;
color: #fff;
font-weight: bold;
}
#nav li a:hover {
color: #fff;
text-decoration: underline;
display: block;
}
#nav li ul {
list-style: none;
position: absolute;
width: 150px;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li li {
float: left;
margin: 0;
padding: 0;
width: 129px;
}
#nav li li a {
width: 129px;
height: 24px;
line-height: 24px;
color: #000;
border-bottom: 1px solid #000;
background: #c5c5c5;
margin: 0;
padding: 5px 20px 5px 15px;
}
#nav li li a:hover {
border-top: 1px solid #131f27;
background: #000;
padding: 5px 20px 5px 15px;
}
#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
position: static;
}
Obviously, you can and will modify this to make it fit for your site, but this should get you started.
Tags: down, drop, javascript, navigation