Home HTML and CSS Tutorials CSS Menu Using JavaScript (Revised)

CSS Menu Using JavaScript (Revised)

Author: Joseph Skidmore More by this author

Added: Aug 25, 2006 Rating:

Level: Experienced Software: Dreamweaver

I noticed a flaw with my original JavaScript drop down menu regarding customization using CSS. The problem was this; the LI elements below the #div's that were hidden didn't conform to their own CSS customization and stuck with the rules of the above LI's.

So the answer was simple, I had to try and customize the containers (#div1, div2 ect), but this didn't seem to work either ... the answer was staring me straight in the face with my own navigation, use the dt and dd tags. It is a completely different element so it should follow different rules.

Here's what I came up with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>

<style type="text/css">
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

ul li a {
display: block;
background-color: #DDEEFF;
color: #369;
width: 100px;
padding: 2px 0px 2px 5px;
text-decoration: none;
}

ul li a:hover {
background-color: #369;
color: #fff;
}

dt a {
display: block;
background-color: #369;
color: #FFF;
width: 100px;
padding: 2px 0px 2px 5px;
text-decoration: none;
}

dt a:hover {
background-color: #FFF;
color: #369;
}
</style>

</head>
<body>

<script type="text/javascript">
//<![CDATA[
function HideandUNhideObj(ThisObj){
nav=document.getElementById(ThisObj).style
if(nav.display=="none"){
nav.display='block';
}else{
nav.display='none';
}
}
//]]>
</script>

<ul>
<li><a href="/img_articles/9093/#" onclick="HideandUNhideObj('div1');"> Menu 1</a></li>
<div style="display: none;" id="div1">
<dl>
<dt><a href="/img_articles/9093/#">Submenu 1</a></dt>
<dt><a href="/img_articles/9093/#">Submenu 2</a></dt>
<dt><a href="/img_articles/9093/#">Submenu 3</a></dt>
<dt><a href="/img_articles/9093/#">Submenu 4</a></dt>
</dl>
</div>
</ul>
<ul>
<li><a href="/img_articles/9093/#" onclick="HideandUNhideObj('div2');"> Menu 2</a></li>
<div style="display: none;" id="div2">
<dl>
<dt><a href="/img_articles/9093/#">Submenu 1</a></dt>
<dt><a href="/img_articles/9093/#">Submenu 2</a></dt>
<dt><a href="/img_articles/9093/#">Submenu 3</a></dt>
<dt><a href="/img_articles/9093/#">Submenu 4</a></dt>
</dl>
</div>
</ul>
<ul>
<li><a href="/img_articles/9093/#" onclick="HideandUNhideObj('div3');"> Menu 3</a></li>
<div style="display: none;" id="div3">
<dl>
<dt><a href="/img_articles/9093/#">Submenu 1</a></dt>
<dt><a href="/img_articles/9093/#">Submenu 2</a></dt>
<dt><a href="/img_articles/9093/#">Submenu 3</a></dt>
<dt><a href="/img_articles/9093/#">Submenu 4</a></dt>
</dl>
</div>
</ul>

</body>
</html>

So the final product actually gives the menu and each submenu it's own style ... perfection! View an example of this working code here: CSS Menu Using JavaScript (Re-Visited).

Author's URL: Joseph Skidmore