Javascript sub menus - collapse

ASP Free Forums Sponsor:

November 6th, 2004, 11:33 PM

deongee

Contributing User

Join Date: Mar 2004

Posts: 297

Time spent in forums: 20 h 9 m 44 sec
Reputation Power: 0

sub menus - collapse

I have a script that when the user clicks on a menu it collapse. What I want is to create submenu that collapse within a menu. When created the submenu and clicked on it the main menu closes it up. In other words it doesn't collapse to it's submenus but nontheless retrackes back to the main menu. Can someone help? Here's the script:

Code:

<script type="text/javascript">
function SwitchMenu(obj){
 if(document.getElementById){
 var el = document.getElementById(obj);
 var ar = document.getElementById("cont").getElementsByTagName("DIV");
  if(el.style.display == "none"){
   for (var i=0; i<ar.length; i++){
    ar[i].style.display = "none";
   }
   el.style.display = "block";
  }else{
   el.style.display = "none";
  }
 }
}
function ChangeClass(menu, newClass) { 
  if (document.getElementById) { 
   document.getElementById(menu).className = newClass;
  } 
} 
document.onselectstart = new Function("return false");
</script>

<title>TEB - Directory</title>
</head>
<BODY>
<link rel=StyleSheet href="Manage_Reports/corporatestyle.css" type="text/css" media="screen">
<script language="JavaScript" src="javascripts.js"></script>
<TABLE cellpadding=0 cellspacing=0 align="center"  border=1 CLASS="shadeform"100%" width="916" bgcolor=whitesmoke><tr><td ALIGN="LEFT" VALIGN="TOP">
<TABLE cellpadding="0" cellspacing="0" border width="916" height="550"><tr><td ALIGN="LEFT" VALIGN="TOP">

<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/shadow1.gif">
<tr></tr></table>
<br>
 

<IMG SRC="picts/spacer.gif" height="50" width="10" border="0"><br>
<!-- OUTER TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="left" VALIGN="top">
<!-- SPLIT TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="LEFT" VALIGN="TOP" width="15">
<IMG SRC="picts/spacer.gif" height="10" width="15" border="0"><br>
</td><td ALIGN="LEFT" VALIGN="TOP" width="175">
 
 
<IMG SRC="picts/spacer.gif" height="5" width="150" border="0"><br>
</td>
<td ALIGN="LEFT" VALIGN="TOP" width="30">
<IMG SRC="picts/spacer.gif" height="10" width="30" border="0"><br>
</td><td ALIGN="" VALIGN="TOP">
<!-- START CONTENT TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="LEFT" VALIGN="TOP">

<p class="just">
<span CLASS="title"><font color="#660033">TEB Document Repository Directory</font>
</span><BR>
<IMG SRC="picts/paragraph-line.jpg" HEIGHT="3" WIDTH="90%" border="0" vspace="7">
<BR><BR>
<!-- COPY AND PASTE CODE BELOW TO MAKE A NEW PARAGRAPH -->
<div id="cont">
<p id="menu1" class="subtitle" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')">
&nbsp;&nbsp;<img src="picts/arrow.gif" width="9" height="9">&nbsp;&nbsp;Oversite Support & Management Team </p>
<div class="submenu" id="sub1" style="display:none;">
<font face="arial"size="2">
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;
<a href="Calendar/default.asp">TEB Calendar</a><br>
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;
<a href="Action_Item/login/login.asp">TEB Action Items</a><br>
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;
<a href="TEB_Acronym.asp">IT Acronyms</a><br>
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;Branch Activity Status -&nbsp;&nbsp;Coming Soon</a><br>
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0"></font>
 
//This is where I want the submenu to collapse to sub-sub menu
<p id="menu2" class="subtitle" onclick="SwitchMenu('sub2')" onmouseover="ChangeClass('menu2','menuOver')" onmouseout="ChangeClass('menu2','menuOut')">
&nbsp;&nbsp;<img src="picts/arrow.gif" width="9" height="9">&nbsp;&nbsp;Management Directive</a></p>
<div class="submenu" id="sub2" style="display:none;">
<font face="arial"size="2">
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">
<a href="Manage_Reports/Management_Dir_report.asp">Branch Management Directive Reports</a><br>
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">
<a href="Doc_Reports/ManageDirectory-summary.pdf">Management Directive Summary</a>
</font></div>
<p id="menu3" class="subtitle" onclick="SwitchMenu('sub3')" onmouseover="ChangeClass('menu3','menuOver')" onmouseout="ChangeClass('menu3','menuOut')">
&nbsp;&nbsp;<img src="picts/arrow.gif" width="9" height="9">&nbsp;&nbsp;Other Support Documents</p>
<div class="submenu" id="sub3" style="display:none;">
<font face="arial"size="2">
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;
All Other Reports&nbsp;&nbsp; Coming Soon</font></div>
<p id="menu4" class="subtitle" onclick="SwitchMenu('sub4')" onmouseover="ChangeClass('menu4','menuOver')" onmouseout="ChangeClass('menu4','menuOut')">
&nbsp;&nbsp;<img src="picts/arrow.gif" width="9" height="9">&nbsp;&nbsp;Data Repository Instruction, Requirements Definitions</a></p>
<div class="submenu" id="sub4" style="display:none;">
<font face="arial"size="2">
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;List Instructions TBD -&nbsp;&nbsp;Coming Soon<br>
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;List Requirements TBD -&nbsp;&nbsp;Coming Soon<br>
</font></div></div>

<IMG SRC="picts/paragraph-line.jpg" HEIGHT="3" WIDTH="90%" border="0" vspace="7">
</font>

<p id="menu5" class="subtitle" onclick="SwitchMenu('sub5')" onmouseover="ChangeClass('menu5','menuOver')" onmouseout="ChangeClass('menu5','menuOut')">
&nbsp;&nbsp;<img src="picts/arrow.gif" width="9" height="9">&nbsp;&nbsp;Collaboration Services</a></p> 
<div class="submenu" id="sub5" style="display:none;">
<font face="arial"size="2">
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;
<a href="Manage_Reports/Collaboration_Serv_Report.asp">Collaboration Service Report</a>
</font></div>

<p id="menu6" class="subtitle" onclick="SwitchMenu('sub6')" onmouseover="ChangeClass('menu6','menuOver')" onmouseout="ChangeClass('menu6','menuOut')">
&nbsp;&nbsp;<img src="picts/arrow.gif" width="9" height="9">&nbsp;&nbsp;Directory Services</p>
<div class="submenu" id="sub6" style="display:none;">
<font face="arial"size="2">
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;
<a href="Manage_Reports/Directory_Serv_Report.asp">Directory Service Report</a>
</font></div>

<p id="menu7" class="subtitle" onclick="SwitchMenu('sub7')" onmouseover="ChangeClass('menu7','menuOver')" onmouseout="ChangeClass('menu7','menuOut')">
&nbsp;&nbsp;<img src="picts/arrow.gif" width="9" height="9">&nbsp;&nbsp;Enterprise Solutions</p>
<div class="submenu" id="sub7" style="display:none;">
<font face="arial"size="2">
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;
<a href="Manage_Reports/Enterprise_Sol_Report.asp">Enterprise Solution Report</a></font></div>

<p id="menu8" class="subtitle" onclick="SwitchMenu('sub8')" onmouseover="ChangeClass('menu8','menuOver')" onmouseout="ChangeClass('menu8','menuOut')">
&nbsp;&nbsp;<img src="picts/arrow.gif" width="9" height="9">&nbsp;&nbsp;Security Services</p>
<div class="submenu" id="sub8" style="display:none;">
<font face="arial"size="2">
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;
<a href="Manage_Reports/Security_Serv_Report.asp">Security Service Report</a></font></div>
<p id="menu9" class="subtitle" onclick="SwitchMenu('sub9')" onmouseover="ChangeClass('menu9','menuOver')" onmouseout="ChangeClass('menu9','menuOut')">
&nbsp;&nbsp;<img src="picts/arrow.gif" width="9" height="9">&nbsp;&nbsp;Performance Analysis & Capacity Planning</p>
<div class="submenu" id="sub9" style="display:none;">
<font face="arial"size="2">
<IMG SRC="picts/spacer.gif" height="10" width="20" border="0">
<img src="images/black_white.gif">&nbsp;
<a href="Manage_Reports/Performance_Planning_Report.asp">Performance Analysis Report</a></font></div>
</div></div>
</div>

Last edited by Lafinboy : November 6th, 2004 at 11:42 PM. Reason: added [code] tags

November 23rd, 2004, 07:22 AM

Phoenix

Web-Standards Evangelist

ASP Free Intermediate (1500 - 1999 posts)

Join Date: Nov 2003

Posts: 1,522

Time spent in forums: 4 Days 23 h 48 m 4 sec
Reputation Power: 8

Ditch that script... and the accompanying HTML

Instead, try the "suckerfish" version...

'tis here: http://www.htmldog.com/articles/suckerfish/dropdowns/

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: