Accessibile Drop Down Menu
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.
Labels: CSS, Javascript, Menus, Web Design
