yegs

<html>
<head>
<script language="javascript" type="text/javascript" src="http://toreadorvampire.serveftp.com/devsamples/modJS/modJS.js"></script>
<style type="text/css">
div#menuContainer {
  width: 200px;
  background-color: #454545;
  color: #FFFFFF;
  font-size: 10px;
  font-family: Verdana, Arial;
}
div#menuContainer a {
  color: #CCCCFF;
  text-decoration: none;
}
div#menuContainer a:hover {
  text-decoration: underline;
}
div#menuContainer ul {
  background-color: #000099;
  padding: 0px;
  margin: 0px;
}
div#menuContainer h3 {
  font-size: 10px;
  margin: 0px 0px 0px;
}
ul.menuContent {
  overflow: hidden;
}
</style>
</head>
<body>
<div id="menuContainer">
  <h3 onclick="toggleMenu(1)">&nbsp;<img id="menuArrow1" src="ArrowRight.gif">&nbsp;Menu 1</h3>
  <ul id="menu1" class="menuContent">
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Navigation Item 1</a></li>

    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Navigation Item 2</a></li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Navigation Item 3</a></li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Navigation Item 4</a></li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Navigation Item 5</a></li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Navigation Item 6</a></li>
  </ul>

  <h3 onclick="toggleMenu(2)">Menu 2</h3>
  <ul id="menu2" class="menuContent">
    <li><a href="#">Navigation Item 1</a></li>
    <li><a href="#">Navigation Item 2</a></li>
    <li><a href="#">Navigation Item 3</a></li>
  </ul>
  <h3 onclick="toggleMenu(3)">Menu 3</h3>

  <ul id="menu3" class="menuContent">
    <li><a href="#">Navigation Item 1</a></li>
    <li><a href="#">Navigation Item 2</a></li>
    <li><a href="#">Navigation Item 3</a></li>
    <li><a href="#">Navigation Item 4</a></li>
    <li><a href="#">Navigation Item 5</a></li>

    <li><a href="#">Navigation Item 6</a></li>
    <li><a href="#">Navigation Item 7</a></li>
    <li><a href="#">Navigation Item 8</a></li>
    <li><a href="#">Navigation Item 9</a></li>
    <li><a href="#">Navigation Item 10</a></li>
    <li><a href="#">Navigation Item 11</a></li>

    <li><a href="#">Navigation Item 12</a></li>
  </ul>
</div>
</body>
<script language="javascript" type="text/javascript">
var menus = new Array()
menus[1] = modJS.dhtml.createObject(document.getElementById("menu1"))
menus[2] = modJS.dhtml.createObject(document.getElementById("menu2"))
menus[3] = modJS.dhtml.createObject(document.getElementById("menu3"))
menus[1].originalHeight = menus[1].baseObject().offsetHeight
menus[2].originalHeight = menus[2].baseObject().offsetHeight
menus[3].originalHeight = menus[3].baseObject().offsetHeight
menus[1].menuState = "open"
menus[2].menuState = "open"
menus[3].menuState = "open"
for (var 1 = 0; i <= 3; i++) {
  menus[i].menuArrowImg = "menuArrow" + i;
}
modJS.dhtml.play(25)

function toggleMenu(id)
{
  if(isNaN(id) || !menus[id])
  {
    return null
  }
  var arrow = document.getElementById(menus[id].menuArrowImg);
  if(menus[id].menuState == "open")
  {
    menus[id].fader(0)
    menus[id].resize(200, 1)
    menus[id].menuState = "closed"
    arrow.src = "ArrowRight.gif"
  }
  else
  {
      menus[id].fader(1)
      menus[id].resize(200, menus[id].originalHeight)
      menus[id].menuState = "open"
      arrow.src = "ArrowLeft.gif"
  }
  return true
}
</script>
</html>