CSS Code, DHTML Code, JavaScript Code

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.


<script type="text/javascript">
function startList() {
  if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes&#91;i&#93;;
    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.


<style type="text/css">
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


<ul id="nav"> 
  <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> 
Share

7 Comments

  1. Very nice. I will use it on one of my future project for sure.

  2. FYI: You have some black text on a black background in the example above. It's just a wee bit hard to read. 🙂

  3. Internet Marketing

    It doesn't work in Firefox.

  4. Not working properly, contact us and services are also coming as list for About menu

  5. Just came across this post. In not the kind to write reviews but just wanted to say 'thumbs up' for the info.

    I would also like to add that today there are also applications that also offer this ( based menus) and save you time from implementing code.

    An example is AllWebMenus. It helps you create SEO friendly menus based on . You can test it http://www.likno.com

  6. Nice info.

    Came across a program that helps you create SEO friendly menus called AllWebMenus. It is based on UL LI structure. It helped and bots did 'read' the menus. If you are interested, take a look: http://www.likno.com

    Hope this helps.

  7. Technology Decisions that Impact SEO | Organic Search Strategy | New Epic Media

    […] Technical Instructions for How to Implement SEO Friendly DropDown Boxes […]

Leave a Reply

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

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image