Bulleted Menu of Links

In this section, I explain how the user understands what he has to do, from his point of view. Assuming that a list item can be expanded (has a sub-list), when the user’s mouse pointer hovers over it, a tool tip should appear indicating that he can click the corresponding bullet to expand the list item (i.e. to see a sub-list). If the mouse pointer hovers over the parent list item, while the item is expanded, a tool tip should appear indicating that he can click the corresponding bullet to collapse the list into the parent list item (i.e. remove the sub-list). A list item that can be expanded, but has not yet expanded, has a disk-style bullet. When a list item is expanded, its bullet is a circle. A list item that cannot be expanded has the bullet of a square. The following figure illustrates this:

• First Level Link 1

  • Second Level Link 11
    

  • Second Level Link 12

    • Third Level Link 121

    • Third Level Link 122

    • Third Level Link 123

  • Second Level Link 13

• First Level Link 2

• First Level Link 3

Fig.3 List items in different states.

Method

In this section, I explain how it works from the technical perspective. All the lists and corresponding links form the content of one table cell. The secret is to use the DOM property called innerHTML. The following JavaScript statement sets the content of a table cell to the value of a string:

document.getElementById("TDL").innerHTML = “Value of String”;

Here, TDL is the ID of the table cell.

Looking at the syntax of this statement, the value of the string can be text, or text with HTML tags. If the string contains HTML tags when the page is displayed, the result will be formatted (as seen by the user).

Implementation

In this section, we see how to write the code using JavaScript and HTML tags. Let us take fig.2 above as our example. Fig.2 can be considered a complete expansion of the list (and sub-lists) from fig.1; while fig.3 can be considered a partial expansion of the list in fig.1. Note the way I have named the different states of expansion in fig.2: First Level Link; Second Level Link and Third Level Link. Also note the numbers associated with these levels. Each group (sub-list) of links is at its state of expansion in an unordered list element. Before you write the code, you have to know the complete state of expansion (fig.2).

When the web page is loaded, you see the three First Level links. These links are already on the web page at the server. However, when the web page is displayed, all the links (and associated lists), in whatever state of arrangement, are a string from a JavaScript function.

When you click a bullet (or any part of the list item that is not the link), a JavaScript function is called. This function forms a new string by adding or subtracting a part of the string from the table cell. The function then sets the new string as the new content of the table cell, replacing anything that was there.