Menu
Could someone give me some idea as to what to fix in the following script?
I believe the problem is in the onload function where I’m trying to create an array of the menu blocks to toggle between show and hide.
I get an error in the toggle function that “info is undefined”.
?:eek:
[code]
<!DOCTYPE HTML>
<html>
<head>
<title> Class Menu </title>
<script type=”text/javascript”>
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if (node == null) node = document;
if (tag == null) tag = ‘*’;
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp(“(^|\s)”+searchClass+”(\s|$)”);
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function toggle(info) { // alert(info.text); // for testing only
var e = info.style.display;
if ((e == ‘block’) || (e == ”)) { e = ‘none’; }
else { e = ‘block’; }
}
window.onload = function() {
var level1 = getElementsByClass(‘menu_head’,document,’div’);
var level2 = getElementsByClass(‘menu_body’,document,’ul’);
for (var i=0; i<level1.length; i++) {
// if (i==0) { str = level1[0].text+’n’+level2[0]; alert(str); } // for testing
level1[i].onclick=function(){toggle(level2[i]);}
}
}
</script>
<style type=”text/css”>
.container { width:250px; border:1px solid black; }
.menu_head_nodrop { background-Color:#ffff00; }
.menu_head { display:block; background-Color:#ffff00; }
.menu_body { display:none; }
li { list-style-type:none; }
</style>
</head>
<body>
<div class=”container”>
<div class=”menu_head_nodrop”>
<p><a href=”administrativeservices.html”>Administrative Services</a></p>
</div>
<div class=”menu_head_nodrop”>
<p><a href=”birthdeathcertificates.html”>Birth & Death Records</a></p>
</div>
<div class=”menu_head”>
<p><u>Construction Programs</u></p>
</div>
<ul class=”menu_body”>
<li><a href=”a1.html”>Installation</a></li>
<li><a href=”a2.html”>Inspections</a></li>
<li><a href=”a3.html”>Approval</a></li>
</ul>
<div class=”menu_head”>
<p><u>Environmental Health</u></p>
</div>
<ul class=”menu_body”>
<li><a href=”b1.html”>Beach Monitoring</a></li>
<li><a href=”b2.html”>Rabies Control</a></li>
<li><a href=”b3.html”>Food Service</a></li>
<li><a href=”b4.html”>Treatment Systems</a></li>
</ul>
<div class=”menu_head”>
<p><u>Health Education & Outreach</u></p>
</div>
<ul class=”menu_body”>
<li><a href=”c1.html”>Community Health</a></li>
<li><a href=”c2.html” rel=”nofollow” target=”_blank”>Handwashing</a></li>
<li><a href=”c3.html”>Healthy Homes</a></li>
<li><a href=”c4.html”>Lead Safety</a></li>
</ul>
</div>
</body>
</html>
None of the links go anywhere in the current version.
This was supposed to be “proof of concept”