AnimTree

HTML Structure

The overall structure is simple and cannot be altered. If you use improper structure, you will have problems.

If it were possible to make the tree in XML, it would look like this:

<button>
    <label>
        <img/>[Text]
   </label>
</button>
<menu>
</menu>
		

For the tree's buttons (expandable nodes), you can use text, an icon + text, or a graphic (icon only).

This sample (below) is a tree with one button and it's menu. In this example, an img is used within the label and the img has the onclick event handler with the value toggleMenu(this).

When the img is clicked, the menu will toggle open. This can be changed by puttin the onclick handler in the label (span tag). For more info, please see the event handlers link in the menu.

Button

The button needs to be a div that has the class "button". If the button is going to be used for a submenu, it will also need to have the class "menuNode". Hence, a submenu button will have the two classes: "button menuNode". The button div needs an id.

Button Label

You need either a span for the button's label with the class "buttonlabel". You can use multiple classes for labels, as in the sample below. A span label may optionally have an img tag inside it. In the sample below, the label has a child img tag.

Graphical Labels

For a purely graphical label, use an img tag.

The HTML:

<!-- fff button 
    this is the button for the menu with id="fffMenu" 
    (shown in blue, below)
-->
<div id="fff" class="button menuNode">

<!-- label -->
  <span class="buttonlabel level1label">
<!-- icon -->
    <img src='../img/menuicon.gif'
          title='click to toggle menu'
          onclick='toggleMenu(this)' 
          alt='*'
          />Bach Family</span>
</div>

<!-- begin menu for fff button -->

<div class="menu" id="fffMenu">
  <div class="menuNode"><!-- item 1 -->
    <a href="http://www.hoasm.org/VIIG/BachJC.html">Johann Sebastian</a>
  </div>
  <div class="menuNode"><!-- item 2 -->
    <a href="http://www.hoasm.org/XID/BachCPE.html">Carl Philip Emanuel</a>
  </div>
  <div class="menuNode"><!-- item 3 -->
    <a href="http://www.hoasm.org/VIIG/BachJC.html">Johann Christian</a>
  </div>
</div> 
<!-- end menu for fff button -->

		

Multiple Class Names in HTML

In case you didn't know, multiple class names, separated by whitespace, may be used. See chapter 7 of the HTML 4.01 specification, The global structure of an HTML document.

Schematic Class Name Diagram

Each arrow connects an element with its class. Notice that some elements have two pointers.

For example, sub menus, for example are matched by both ".menu" and ".menu .menu". Submenu buttons are matched by ".button", ".menuNode", and ".button.menuNode". You'll learn more about the CSS on the relevant page.

Next in this tutorial: Event Handlers: toggleMenu, buttonOver, and buttonOff