-
 Classy Drop Down Menu with JavaScript
I had a typo on the document.get command for the submenu. Thanks anyway! 
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>
Last edited by odayette; 07-19-2006 at 10:46 AM.
Reason: Problem Solved
Similar Threads
-
Replies: 0
Last Post: 03-13-2006, 05:27 PM
-
By abdurrehman in forum VB Classic
Replies: 1
Last Post: 03-03-2005, 10:56 PM
-
By sks in forum Open Source
Replies: 1
Last Post: 12-18-2000, 12:40 PM
-
By Murray Foxcroft in forum Web
Replies: 5
Last Post: 11-02-2000, 02:42 AM
-
By Pradeep Jain in forum Web
Replies: 0
Last Post: 07-03-2000, 07:41 AM
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
Forum Rules
|
Top DevX Stories
Easy Web Services with SQL Server 2005 HTTP Endpoints
JavaOne 2005: Java Platform Roadmap Focuses on Ease of Development, Sun Focuses on the "Free" in F.O.S.S.
Wed Yourself to UML with the Power of Associations
Microsoft to Add AJAX Capabilities to ASP.NET
IBM's Cloudscape Versus MySQL
|
Reply With Quote
Bookmarks