#1
  1. No Profile Picture
    Contributing User
    ASP Discoverer (100 - 499 posts)

    Join Date
    Mar 2004
    Posts
    312
    Rep Power
    0

    Question 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
  2. #2
  3. Web-Standards Evangelist
    ASP Skiller (1500 - 1999 posts)

    Join Date
    Nov 2003
    Posts
    1,522
    Rep Power
    19
    Ditch that script... and the accompanying HTML

    Instead, try the "suckerfish" version...

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

Similar Threads

  1. Menus - Visual Basic Style
    By KarenNicholson in forum Microsoft Access Help
    Replies: 1
    Last Post: September 3rd, 2004, 10:28 AM
  2. Dynamic Drop down menu's
    By ocbren in forum ASP Development
    Replies: 0
    Last Post: September 1st, 2004, 10:16 AM
  3. Jump Menus to Query String
    By benette in forum ASP Development
    Replies: 1
    Last Post: August 11th, 2004, 11:42 PM
  4. Multiple Self-Populating Drop Down Menus
    By bcm2 in forum ASP Development
    Replies: 1
    Last Post: April 15th, 2004, 06:45 PM
  5. Drop down menus
    By eel_22 in forum SQL Development
    Replies: 1
    Last Post: February 16th, 2003, 06:32 AM

IMN logo majestic logo threadwatch logo seochat tools logo