Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old May 26th, 2005, 12:21 PM
Authorized User
 
Join Date: Mar 2004
Location: , , United Kingdom.
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default Expanding menu

Hi there

I have been trying to write a left hand side menu that expands to submenus without using layers.

On http://bucarotechelp.com/design/97020410.asp I found just what I was looking for, or so I thought, using CSS to show and hide various tablerows, BUT I don't want the Folder icons that this code suggests, so I have trimmed out the bits I THINK I don't want and now it doesn't work.

The full code can be viewed at http://bucarotechelp.com/design/9702...age=5&x=43&y=8

And here is my edited version:
I hope someone can tell me where I go wrong.

Heidi
---------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.menu
{
    display: "block";
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #122A72;
    text-decoration: none;
}
.submenu
{
    display: "none";
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #8F2718;
    text-decoration: none;
    font-style: normal;
}
</style>

<script language="JavaScript">

arMenu = new Array();

function expandMenu(mn)
{
    //hide all submenus

    //show the requested menus' submenus

}

arMenu[0] = new Array("m0",
);

arMenu[1] = new Array("m1",
"sm10",
"sm11",
"sm12",
"sm13",
"sm14",
"sm15",
"sm16",
"sm17",
"sm18",
"sm19",
"sm120",
"sm121"
);

arMenu[2] = new Array("m2",
"sm20",
"sm21",
"sm22"
);

arMenu[3] = new Array("m3",
"sm30",
"sm31",
"sm32",
"sm33"
);

arMenu[4] = new Array("m4",
"sm40",
"sm41",
"sm42",
"sm43",
"sm44"
);

arMenu[5] = new Array("m5",
"sm50",
"sm51"
);

function expandMenu(mn)
{
  // hide all submenus
  for(var i = 0; i < arMenu.length; i++)
  {
     document.getElementById(arMenu[i][j]).style.display = "none";
    }


  // show the requested menus submenu's
  for(var k = 1; k < arMenu[mn].length; k++)
  {
    document.getElementById(arMenu[mn][k]).style.display = "block";
  }

}

</script>
</head>

<body bgcolor="#F5F5DC">
<table>

  <tr class="menu" >
    <td colspan="2">Home</td>
  </tr>



  <tr id="m1" class="menu">

    <td colspan="2">Educational Programmes</td>
  </tr>
<tr id="sm10" class="submenu">
    <td colspan="2">UNDERGRADUATE (Hons)</td>
    </tr>
  <tr id="sm11"class="submenu">
    <td width="10">&nbsp;</td>
    <td width="209"><a href="#" class="submenu">BSc Occupational Therapy</a></td>
  </tr>

  <tr id="sm12 "class="submenu">
    <td>&nbsp;</td>
    <td><a href="#" class="submenu">BSc Physiotherapy</a></td>
  </tr>

  <tr id="sm13" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">BSc Podiatry</a></td>
  </tr>
  <tr id="sm14" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">BSc OT Part time</a></td>
  </tr>

  <tr id="sm15" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">BSc PT Part time</a></td>
  </tr>
  <tr id="sm16" class="submenu">
    <td colspan="2">POSTGRADUATE (Hons)</td>
    </tr>
  <tr id="sm17" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu">MSc Physiotherapy (Pre-reg)</td>
  </tr>

  <tr id="sm18" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">MSc Health and Rehabilitation</a></td>
  </tr>

  <tr id="sm19" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">Doctorate in Clinical Practice</a></td>
  </tr>
  <tr id="sm120" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu">PhD</td>
  </tr>
  <tr id="sm121" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu">CPD</td>
  </tr>


  <tr id="m2">

    <td colspan="2"><a href="#" class="menu" onClick="expandMenu(2); return false;">Research</a></td>
  </tr>

  <tr id="sm20" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">Overview</a></td>
  </tr>

  <tr id="sm21" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">Staff Research Interests</a></td>
  </tr>

  <tr id="sm22" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">PhD Students</a></td>
  </tr>

  <tr id="m3">

    <td colspan="2"><a href="#" class="menu" onClick="expandMenu(3); return false;">Enterprise</a></td>
  </tr>

  <tr id="sm30" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">Overview</a></td>
  </tr>

  <tr id="sm31" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">Consultancy</a></td>
  </tr>

  <tr id="sm32" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">CPD</a></td>
  </tr>

  <tr id="sm33" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">Commercial Links</a></td>
  </tr>

  <tr id="m4">

    <td colspan="2"><a href="#" class="menu" onClick="expandMenu(4); return false;">About Us</a></td>
  </tr>

  <tr id="sm40" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">Overview</a></td>
  </tr>

  <tr id="sm41" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">People</a></td>
  </tr>

  <tr id="sm42" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">School History</a></td>
  </tr>
  <tr id="sm43" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">Vacancies</a></td>
  </tr>
  <tr id="sm44" class="submenu">
    <td>&nbsp;</td>
    <td class="submenu"><a href="#" class="submenu">Contact Us</a></td>
  </tr>


  <tr id="m5">

    <td colspan="2"><a href="#" class="menu" onClick="expandMenu(5); return false;">Latest News</a></td>
  </tr>

  <tr id="sm50" class="submenu">
    <td>&nbsp;</td>
    <td><a href="#" class="submenu">News</a></td>
  </tr>

  <tr id="sm51" class="submenu">
    <td>&nbsp;</td>
    <td><a href="#" class="submenu">Press Releases</a></td>
  </tr>


</table>
</body>
</html>




Similar Threads
Thread Thread Starter Forum Replies Last Post
expanding default values in xslt Alex73 XSLT 1 March 23rd, 2007 06:39 AM
CMS: Expanding the database retroviz BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 12 February 27th, 2007 06:15 PM
expanding menu urgent help needed antonyx Javascript How-To 1 April 13th, 2006 04:10 AM
aspx - dynamically expanding the page vhrao General .NET 1 November 5th, 2004 03:49 PM
Dynamically expanding and collapsing elements richard.york Javascript 3 November 26th, 2003 09:17 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.