Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #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>


Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 03:13 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.