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.

Creating Equal Column Designs with Javascript and CSS

If you have a CSS template design where you want the design to have a full background colour all aligned, or you just want to have the design that has all equal columns you can use the pre-built Javascript library.

The library is available from Dynamic Drive.

Instructions

Start by inserting the code <script src="equalcolumns.js" type="text/javascript"></script> into the head of your HTML file.

Then download the file equalcolumns.js by right clicking on the link and selecting Save As.

You will then need to change the line:

ddequalcolumns.columnswatch=["leftcolumn", "rightcolumn", "contentwrapper"]

Change the names of the columns from your CSS file you want to make equal. If you only have two columns you can just name the first two entries and leave the final one blank.