the code works fine, except that since I’m using the "onload" call in the body tag, it auto expands the complete menu tree on page load for a brief second. It is being complained about, so I’m wondering if there is a better way to call the onload event?
below is the code
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta content="IE=8" http-equiv="X-UA-Compatible">
<title>
</title>
<link href="style.css" media="all" rel="stylesheet">
<script>
var myvar;
function menuinit() {
document.getElementById('m1').style.display = 'none';
document.getElementById('m2').style.display = 'none';
document.getElementById('m3').style.display = 'none';
//document.getElementById('pm1').src = 'images/menu_plus.png';
//document.getElementById('pm2').src = 'images/menu_plus.png';
//document.getElementById('pm3').src = 'images/menu_plus.png';
}
function menuexpand (i) {
menuinit();
if (myvar == i) {
//document.getElementById('p' + i).src = 'images/menu_plus.png';
document.getElementById(i).style.display = 'none';
myvar = '';
}
else {
//document.getElementById('p' + i).src = 'images/menu_minus.png';
document.getElementById(i).style.display = 'block';
myvar = i;
}
}
</script>
</head>
<body id="about" onload="menuinit();">
<ul id="menu">
<li><a href="#" class="head" onclick="menuexpand('m1');return false;">About Us</a>
<ul id="m1">
<li><a href="news.html">News & Events</a></li>
<li><a href="history.html">History</a></li>
<li><a href="mission.html">Mission</a></li>
<li><a href="management.html">Management</a></li>
</ul>
</li>
<li><a href="#" class="head" onclick="menuexpand('m2');return false;">Products</a>
<ul id="m2">
<li><a href="product1.html">product1</a></li>
<li><a href="product2.html">product2</a></li>
<li><a href="product3.html">product3</a></li>
<li><a href="product4.html">product4</a></li>
</ul>
</li>
<li><a href="#" class="head" onclick="menuexpand('m3');return false;">Investor Relations</a>
<ul id="m3">
<li><a href="investors.html">Investors</a></li>
<li><a href="press.html">Press Releases</a></li>
<li><a href="sec.html">SEC Filings</a></li>
<li><a href="disclosure.html">Disclosure</a></li>
<li><a href="contactus.html">Request Info</a></li>
</ul>
</li>
</ul>
</body>
</html>
Quick and dirty fix is to hide the menu using CSS and then show it after the page is loaded.