This document explains how to implement a set of side-by-side collapsible menus. (The ones by Rowan Lewis (based on jQuery)). The working example is at the top of this page. I'm calling this the 2 March version because I'd like to replace this table version with a pure CSS version if that's preferable. Plus the three id thing seems kludgey to me. That said, the methodology used here should work fine either way. The styling here is minimal -- just enough to visually differentiate between the components of the menu.

In this version, the following assumptions are made:

1. When a submenu is opened, other opened submenus remain open. (This behavior is modifiable.)

2. Vertical alignment is top. (Submenus expand downward.)

To implement, follow these steps:

1. Each of the three menus lives in a <td> by itself, and looks like this:

<ul id="Menu">
  <li><a href="#">Section A</a>
    <ul>
      <li><a href="#">Link A</a></li>
      <li><a href="#">Link B</a></li>
      <li><a href="#">Link C</a></li>
    </ul>
  </li>
  <li><a href="#">Section B</a>
    <ul>
      <li><a href="#">Link A</a></li>
      <li><a href="#">Link B</a></li>
      <li><a href="#">Link C</a></li>
    </ul>
  </li>
  <li><a href="#">Section C</a>
    <ul>
      <li><a href="#">Link A</a></li>
      <li><a href="#">Link B</a></li>
      <li><a href="#">Link C</a></li>
    </ul>
  </li>
</ul>

However, the because the js uses the id, we need separate ids for each column. So, the second one begins with:

<ul id="Menu2">

And the third with:

<ul id="Menu3">

2. Now we need to take care of the CSS. The specification for the first menu looks like this. Note that there's no magic here except the div id. The rest is candy. In other words, you could literally have just the #Menu and everything would work fine. Note also that the id will correspond to the js when we get to that.

/* first of three menus */
#Menu,
#Menu ul {
  list-style : none;
  width : 15em;
}
#Menu a {
  background : #999;
  display : block;
  padding : 0.5em 1em;
  border-left: 1px solid #afafaf;
}
#Menu ul a {
  background : #cfcfcf;
}
#Menu ul a:hover {
  background : #fff;
}

The other ids are #Menu2 and #Menu3, respectively.

3. Let's set up the js. The original code (which we're not using) looks like this:

$(document).ready(function() {
	// Collapse everything but the first menu:
	$("#Menu > li > a").not(":first").find("+ ul").slideUp(1);
	
	// Expand or collapse:
	$("#Menu > li > a").click(function() {
		$(this).find("+ ul").slideToggle("fast");
	});
});

The "Collapse everything but the first menu" trick is nice, but not what we want, I think. So I removed the not(":first"). Also, we must account for all three ids. So, the reworked code looks like this (note the jquery line):

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
    $("#Menu > li > a").find("+ ul").slideUp(1);
    $("#Menu2 > li > a").find("+ ul").slideUp(1);
    $("#Menu3 > li > a").find("+ ul").slideUp(1);

    // Expand or collapse:
    $("#Menu > li > a").click(function() {
      $(this).find("+ ul").slideToggle("fast");
    });
    $("#Menu2 > li > a").click(function() {
      $(this).find("+ ul").slideToggle("fast");
    });
    $("#Menu3 > li > a").click(function() {
      $(this).find("+ ul").slideToggle("fast");
    });
  });
</script>

Hm. That says, "refactor me" to me. Be that as it may or not, there you go.

-- Brian Kei Tanaka