Thread: Expanding menu
View Single Post
  #1 (permalink)  
Old May 26th, 2005, 12:21 PM
blaabil blaabil is offline
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>