Javascript drop down menus or CSS drop down menus? Personally I am a for the CSS approach because it is simplier and cleaner to code - However, professionel Javascript or DHTML drop down menus are generally programmed for backward compatability with older browers and also take into consideration client sided problems such as drop down menus that are longer then can be displayed on the screen.
If the menu data is being held in an externally linked javascript file then it can be used for all pages on the site which makes maintainance simply if the source must be changed. There are also some very good programs which can produce both types either css menus or dhtml menus to help for those who do not want to hard-code the menus by hand.
Mainly based on the Suckerfish code
External link: Suckerfish code . I changed a few minor things because I wanted the drop down menu to be a different size from the top level menu title. I also required the top level menu titles to be links. Getting the thing to work in a dumb browser like IE requires the javascript hack because IE can only hover on links. Arrgghhh. So here is the demo page
Source code for HTML menu
<ul id="topmenu" id="dmenu">
<li class="topmenuli"><a href="" class="topmenutitle">Menu 1</a>
<ul class="submenuul">
<li class="submenuli"><a href="">sub item ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
</ul>
</li>
<li class="topmenuli"><a href="" class="topmenutitle">Menu 2</a>
<ul class="submenuul">
<li class="submenuli"><a href="">sub item , ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
</ul>
</li>
<li class="topmenuli"><a href="" class="topmenutitle">Menu 3</a>
<ul class="submenuul">
<li class="submenuli"><a href="">sub item ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
<li class="submenuli"><a href="">sub item ...</a></li>
</ul>
</li>
<ul>
minimum menu requirements for functionality
The css here contains the absolute minimum so the drop down menus function.
<style type="text/css">
<!-- /* minimum menu requirements */
.topmenuul{
list-style-type:none;
margin:0;
padding:0;
}
.topmenuli {
list-style-type:none;
float:left;
}
.topmenutitle {
display:block;
width:100px;
}
.submenuul{
list-style-type:none;
position:absolute;
margin:0;
padding:0;
display:none;
}
.submenuli a{
display:block;
width:250px;
}
li:hover ul , li.over ul {
/* lists nested under hovered list items */
display: block;
}
#dmenu li>ul {
top: auto;
left: auto;
}
#content {
clear: left;
}
-->
</style>
And a bit css to make them look nice.
/* menu design */
#dmenu {
font-family: Arial, Helvetica, Sans-Serif;
font-size:12px;
}
.topmenuul { }
.topmenutitle {
text-indent:3px;
text-decoration: none;
border:1px solid #000000;
padding:3px;
line-height:14px;
}
.submenuul {
margin-top:-1px;
background-color:#E7F7FF;
background-position: top left;
background-repeat: repeat-x;
border-top:1px solid #000000;
border-bottom:2px solid #000000;
border-right:2px solid #000000;
border-left:7px solid #FF0000;
}
.submenuli a{
padding:3px;
text-decoration: none;
color: #000000;
}
.submenuli a:hover{
text-decoration: none;
background:#336699;
color: #FFFFFF;
}
Not so pure CSS - IE still requires Javascript
You will need to insert this javascript into the HTML for users of IE (and that is most of the world). At least the very small percentage of users who have javascript deactivated can still use the top level links.
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all && document.getElementById) { navRoot = document.getElementById("dmenu"); 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>
