Below is the script to control the Unordered List shown in Example 1 - 3
(for Browsers that don't fully support the model - ie., NN6)
The above menu needs a script to allow older browsers
to block/hide the inline elements.
Using the toggleLayer function that we discussed in class 4,
allow older browsers to use the onClick event to hide show the <ul>
list items
Add a unique id to each of the child level <ul> tags.
Add an anchor/hyperlink <a> tag at the <li> tag that will control the child level <ul> block defined in the last step.
(Remove the text-decoration - optional)
This should allow your menu to work in about 99.9% of all browsers.
<html>
<head>
<title>menu</title>
<style type="text/css">
ul { /* Style for all <ul> tags */
margin: 0; /* margin removes indentation */
padding: 0; /* margin removes indentation (non-ie)*/
list-style: none; /* removes bullets (non-ie) */
background-color:Blue; /* Optional: remove for transparent effect */
}
li { /* Style for all <li> items */
float: left; /* changes items to Horizontal */
position: relative; /* keep the <li> from bunching to right */
width: 125px; /* this is the width of each menu item */
}
/* Selects for all <ul> elements somewhere inside a <li> element */
li ul { /* Style for second-level lists */
display: none; /* hidden on load */
position: absolute; /* keep location absolute*/
top: 20px; /* keep 20 px from top */
left: 0; /* removes indentation to left */
}
/* IE 6.0 and lower don't understand the CSS child selector ">" */
li>ul { /* NN/IE COMPATIBILITY FIX:*/
top: auto; /* to override top and left in browsers other */
left: auto; /* than IE,which will position to the top right */
} /* of the containing li, rather than bottom left */
/* BELOW IS THE MAGIC */
/* style for <ul> tag where pseudo-class is somewhere inside an <li> element */
/* This works in CSS Level 2 compliant browsers (non-IE) */
li:hover ul{ /* lists nested under hovered list items */
display: block; /* hidden on load (hover is CSS Level 2 only) */
}
/* style for <ul> tag where new class "cover" is attribute of <li> element */
/* This works in CSS Level 1 compliant browsers with the help of some javascript*/
li.cover ul { /* lists nested under hovered list items */
display: block; /* hidden by default */
}
/* Selects topMenu class somewhere inside an <a> element */
A.topMenu { /* Style for link tags */
text-decoration:none; /* no underline */
color:white; /* text color */
}/* modification for hover event */
A.topMenu:hover { /* Style for link tags */
background-color:orange; /* background color */
color:green; /* text color */
}
</style>
<script type="text/javascript">
<!--
function startList() {
if (document.all && document.getElementById) { // CHECK FOR STANDARD
navRoot = document.getElementById("nav"); // FIND/assign ID "nav"
for (i=0; i<navRoot.childNodes.length; i++) { // LOOP THROUGH nav NODES
node = navRoot.childNodes[i]; // first/last node array
if (node.nodeName=="LI") { // IF NODE IS <li>
node.onmouseover=function() { // ASSIGN result of Function
this.className+=" cover"; // ALTER className append cover
} // END anonymous Function
node.onmouseout=function() { // ASSIGN result of Function
// replace classname - find and replace " cover" with ""
this.className=this.className.replace(" cover", "");
} // END anonymous Function
} // END if (node.nodeName=="LI")
} // END LOOP THROUGH nav NODES
} // END CHECK FOR STANDARD
} // END shorthand anonymous Function
//Use the toggleLayer function to assist older browsers with menu.
function toggleLayer(whichLayer){// See Class 4 for explanation of toggleLayer
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}
//-->
</script>
</head>
<body onload="startList()">
<ul id="nav">
<li><a href="#" style="text-decoration:none"
onclick="toggleLayer('lI1')">First</a>
<ul id="lI1" >
<li><a href="#" class="topMenu">aaaaaaaa</a></li>
<li><a href="#" class="topMenu">bbbbbbbb</a></li>
<li><a href="#" class="topMenu">cccccccc</a></li>
<li><a href="#" class="topMenu">dddddddd</a></li>
</ul>
</li>
<li><a href="#" style="text-decoration:none"
onclick="toggleLayer('lI2')">Second</a>
<ul id="lI2">
<li><a href="" class="topMenu">eeeeeeee</a></li>
<li><a href="" class="topMenu">ffffffff</a></li>
<li><a href="" class="topMenu">gggggggg</a></li>
</ul>
</li>
<li><a href="#" style="text-decoration:none"
onclick="toggleLayer('lI3')">Third</a>
<ul id="lI3">
<li><a href="" class="topMenu">hhhhhhhh</a></li>
<li><a href="" class="topMenu">iiiiiiii</a></li>
<li><a href="" class="topMenu">jjjjjjjj</a></li>
<li><a href="" class="topMenu">kkkkkkkk</a></li>
<li><a href="" class="topMenu">llllllll</a></li>
</ul>
</li>
</ul>
<div>
<p>
content here...
</p>
</div>
</body>
</html>