Classy Drop Down Menu with JavaScript
I had a typo on the document.get command for the submenu. Thanks anyway! :WAVE:
Tom Duffy's Pop Goes the Menu code is great but I'm having trouble adding additional menu items. I'm getting an error message and it is usually at the </script> tag. I'm pretty certain it is because I can not figure out what numbers to use in positioning, possibly the first submenu position. Would appreciate any assistance. Thank you.
This is the code:
<html>
<head>
<title>Ergonomics Site</title>
<style>
.menu a{
color: white;
text-decoration: none;
}
.menu a:hover{
color: yellow;
}
.menuBar{
background-color: rgb(50,50,130);
position: absolute;
top: 0;
left: 0;
height: 15;
z-index: 1;
padding: 4px;
}
.menuTrigger{
font: 10pt Verdana, sans-serif;
color: white;
background-color: rgb(50,50,130);
position: absolute;
top: 0;
padding: 4px;
width: 100;
height: 15;
z-index: 2;
cursor: pointer;
cursor: hand;
}
.menu{
font: 8pt Verdana, sans-serif;
color: white;
background-color: rgb(50,50,130);
position: absolute;
top: 23;
padding: 5px;
width: 100;
visibility: hidden;
z-index: 2;
}
</style>
<script language="JavaScript">
var mnuSelected = '';
var subMnuSelected = '';
function showMenu(menu){
hideMenu(mnuSelected);
document.getElementById(menu).style.visibility = 'visible';
mnuSelected = menu;
}
function hideMenu(menu){
if(mnuSelected!='')
document.getElementById(menu).style.visibility = 'hidden';
}
function showSubMenu(menu){
hideSubMenu(subMnuSelected);
document.getElementById(menu).style.visibility = 'visible';
subMnuSelected = menu;
}
function hideSubMenu(menu){
if(subMnuSelected!='')
document.getElementById(menu).style.visibility = 'hidden';
}
function init(){
if(document.all){
aWidth = document.body.clientWidth;
document.getElementById('menuBar').style.width = aWidth;
}else{
aWidth = innerWidth;
document.getElementById('menuBar').style.width = aWidth-35;
}
document.getElementById('1').style.left = parseInt((aWidth/2 - 300));
document.getElementById('2').style.left = parseInt((aWidth/2 - 200));
document.getElementById('3').style.left = parseInt((aWidth/2 - 100));
document.getElementById('4').style.left = parseInt(aWidth/2);
document.getElementById('5').style.left = parseInt((aWidth/2 + 100));
document.getElementById('6').style.left = parseInt((aWidth/2 + 200));
document.getElementById('mnu1').style.left = document.getElementById('1').style.left;
document.getElementById('mnu2').style.left = document.getElementById('2').style.left;
document.getElementById('mnu3').style.left = document.getElementById('3').style.left;
document.getElementById('mnu4').style.left = document.getElementById('4').style.left;
document.getElementById('mnu5').style.left = document.getElementById('5').style.left;
document.getElementById('mnu6').style.left = document.getElementById('6').style.left;
document.getElementById('mnu11Sub1').style.left = parseInt(document.getElementById('11').style.left) + 300;
}
</script></head>
<body onLoad="init()" onResize="history.go(0)" bgcolor="#EEEEEE">
<div id="menuBar" class="menuBar"></div>
<div id="1" class="menuTrigger" onMouseOut="this.style.color='';" onMouseOver="showMenu('mnu1'); hideSubMenu(subMnuSelected);this.style.color='yellow';">1</div>
<div id="2" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu2'); hideSubMenu(subMnuSelected);this.style.color='yellow';">2</div>
<div id="3" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu3'); hideSubMenu(subMnuSelected);this.style.color='yellow';">3</div>
<div id="4" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu4'); hideSubMenu(subMnuSelected);this.style.color='yellow';">4</div>
<div id="5" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu5'); hideSubMenu(subMnuSelected);this.style.color='yellow';">5</div>
<div id="6" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu6'); hideSubMenu(subMnuSelected);this.style.color='yellow';">6</div>
<div id="mnu1" class="menu" onMouseOut="hideMenu(mnuSelected);hideSubMenu(subMnuSelected);" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='red'; showSubMenu('mnu11Sub1');" onMouseOut="this.style.backgroundColor='';event.cancelBubble=true;"><a href="#">11</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">111</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">111</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">111</a></p>
</div>
<div id="mnu2" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">2</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">2</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">2</a></p>
</div>
<div id="mnu3" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">3</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">3</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">3</a></p>
</div>
<div id="mnu4" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">4</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">4</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">4</a></p>
</div>
<div id="mnu5" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
</div>
<div id="mnu6" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#"6</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">6</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">6</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">6</a></p>
</div>
<div id="mnu11Sub1" class="menu" style="top: 30" onMouseOut="hideMenu(mnuSelected); hideSubMenu(subMnuSelected)" onMouseOver="showMenu(mnuSelected); showSubMenu(subMnuSelected)">
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
<p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
</div>
<p> </p>
<p style="margin-left: 10"> </p>
<p style="margin-left: 10"> </p>
</body>
</html>
