TECH Javascript expand/collapse menu v. auto expands briefly onload of page

Mikey

This one, this form I hold now, so Wide eyed and h
Oct 18, 2001
23,088
Baltimore
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

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>
 

schmack

Professional Lurker
OT Supporter
Mar 12, 2003
1,982
Quick and dirty fix is to hide the menu using CSS and then show it after the page is loaded.
 

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
455
Guests online
49
Total visitors
504

Forum statistics

Threads
369,753
Messages
16,917,712
Members
86,875
Latest member
ddunn9448