DHTML - SEO-friendly drop-down menus with CSS
Many DHTML drop-down (fly-out) menu solutions are complicated to implement, require complex JavaScript arrays, are resource intensive, and can't be read by search engines. This code addresses these issues, and allows you to create menus from <ul> lists very easily, which are SEO friendly.
A little Javascript hack is needed to get the :hover pseudo class to work in Internet Explorer.
function startList() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
Here are the style definitions that define the look of the menus, as well as the fly-out behaviour when you move your mouse over an item.
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
display: inline;
}
li ul {
position: relative;
display: none;
top: 20px;
}
/* Styles for Menu Items */
ul li a {
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
}
li ul li, li ul li a {
display: block;
width: 200px;
margin: 0px;
}
/* Fix IE*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
</style>
And finally the HTML code to make the menus. Just edit the lists with your own links and sub-menu links
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
Digg this
post to del.icio.us
on August 12th, 2006 at 7:11 am
Very nice. I will use it on one of my future project for sure.
on October 12th, 2007 at 11:20 am
FYI: You have some black text on a black background in the example above. It's just a wee bit hard to read.
on November 9th, 2007 at 2:43 pm
It doesn't work in Firefox.
on March 29th, 2008 at 2:43 pm
Not working properly, contact us and services are also coming as list for About menu