Accessibile Drop Down Menu

If you want to create an accessible drop down menu that uses unordered lists then this script is definitely for you! This way you don't have to have bucket loads of javascript which bloats yous website, and you do have excellent SEO for the menu as they are just unordered lists.



Bug Fix to force the hover of the menu

To force the menu to appear and disapear when you roll your mouse over it you need to insert some conditional Javascript code into the head of the page.

<script type="text/javascript"><!--//--><![CDATA[//><!--
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);

//--><!]]>
</script>

The Menu

The menu is based on unordered lists, when you want to insert a drop down menu you insert another fully formed unordered list between the end of the link and the end of the ordered list item.

The enflexion website menu uses this to create the drop down menu as shown below:


<ul id="nav">

<li><a href="/index.shtml">HOME</a></li>

<li><a href="/about/index.shtml">ABOUT US</a><ul>

<li><a href="/about/ourphilosophy.shtml">OUR PHILOSOPHY</a></li>

<li><a href="/about/methodologies.shtml">OUR METHODOLOGY</a></li>

<li><a href="/about/news/index.shtml">ENFLEXION NEWS</a></li>

</ul>

</li>

<li><a href="/packages/index.shtml">WEBSITES</a>

<ul>

<li> <a href="/packages/index.shtml">PACKAGE SOLUTIONS</a></li>

<li> <a href="/packages/quickstart.shtml">QUICK START PACKAGE</a></li>

<li> <a href="/packages/standard.shtml">STANDARD PACKAGE</a></li>

<li> <a href="/packages/business.shtml">BUSINESS PACKAGE</a></li>

<li> <a href="/packages/ecommerce.shtml">ECOMMERCE PACKAGE</a></li>

<li> <a href="/packages/faqs/index.shtml">PACKAGES FAQ</a></li>

</ul>

</li>

<li><a href="/services/index.shtml">SERVICES</a>

<ul>

<li><a href="/services/design.shtml">DESIGN & DEVELOPMENT</a></li>

<li><a href="/services/consulting.shtml">CONSULTING & ADVICE</a></li>

<li><a href="/services/project.shtml">PROJECT MANAGEMENT</a></li>

</ul>

</li>

<li><a href="/products/index.shtml">PRODUCTS</a>

<ul>

<li><a href="/products/sliced/index.shtml">SLICED BREAD CONTENT MANAGEMENT</a></li>

<li><a href="/products/intranet/index.shtml">INTRANET IN A BOX</a></li>

<li><a href="/products/sliced/commerce/shopping.shtml">SHOPPING CART</a></li>

</ul>

</li>

<li><a href="/research/index.shtml">RESEARCH</a>

<ul>

<li><a href="/research/index.shtml">WEBFLEXION OVERVIEW</a></li>

<li><a href="/research/archive.shtml">ARCHIVED ARTICLES</a></li>

<li><a href="/research/blog/index.shtml">TECHNOLOGY BLOG</a></li>

</ul></li>

<li><a href="/clients/index.shtml">CLIENTS</a>

<ul>

<li><a href="/clients/testimonials.shtml">TESTIMONIALS</a></li>

<li><a href="/clients/case.shtml" >CASE STUDIES</a></li>

</ul></li>

<li><a href="/contact/index.shtml">CONTACT</a></li>

</ul>

The CSS


#nav, #nav ul {

float:left;

list-style: none;

background: #5fc601;

font-weight: bold;

padding: 0px;

margin: 0;

font-size:13px;

font-family: arial;

}

#nav a {

display: block;

width: 72px;

color: #fff;

text-decoration: none;

padding: 8px;

font-family: arial;

text-align: center;

border-right: 2px solid #fff;

height: 14px;

}


#nav li {

float: left;

padding: 0;

width: 90px;

margin-right: 0px;

font-family: arial;

}


#nav li ul {

position: absolute;

left: -1000px;

height: auto;

width: 150px;

font-weight: bold;

border: 1px solid #fff;

margin: 0;

}


#nav li li {

width: 150px;

font-size:11px;

border-top: 1px solid #fff;

padding: 0;

margin:0;

}

#nav li ul a {

width: 140px;

height: auto;

font-size:11px;

padding: 5px;

font-family: arial;

text-align: left;

}


#nav li ul ul {

margin: -1.75em 0 0 14em;

}

#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 {

left: auto;
}

#nav li:hover, #nav li.sfhover {

background: #ad0925;
}

You can see the entire code in operation here at the enflexion Website Design website.