Building a Bulleted Menu Of Links: Display Method

In this section I explain how the user understands what he has to do and what is going on from his point of view. Assuming that a list item can be expanded (has a sub-list), then 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). While the item is expanded, if the mouse pointer hovers over the parent list item, 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 is not yet expanded, has a disk-shaped 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.

You need basic knowledge of HTML, CSS and JavaScript in order to understand this article.

Method

In this section, I explain how it works from the technical perspective. Note that the links have been arranged in levels. Each link is in an LI element. The first level list (fig.1) is a UL element that has each First Level Link in an LI element. We can say a first level link is in a first level LI element. Fig.1 above is as follows from a technical perspective:

<ul>

<li><a>First Level Link 1</a></li>

<li><a>First Level Link 2</a></li>

<li><a>First Level Link 3</a></li>

</ul>

Below each first level LI element is a UL element with its own LI elements. This UL element will be the sub-list of the LI element above it. This description applies to further sub-lists down the chain. Technically, each of the above first level LI elements is expanded as follows (the illustration is the case of First Level Link 1):

<li><a>First Level Link 1</a></li>

<ul>

<li>Second Level Link 11</li>

<ul>

<li>Third Level Link 111</li>

<li>Third Level Link 112</li>

<li>Third Level Link 113</li>

</ul>

<li>Second Level Link 12</li>

<ul>

<li>Third Level Link 121</li>

<li>Third Level Link 122</li>

<li>Third Level Link 123</li>

</ul>

<li>Second Level Link 13</li>

<ul>

<li>Third Level Link 131</li>

<li>Third Level Link 132</li>

<li>Third Level Link 133</li>

</ul>

</ul>

Fig.4 Descendants of First Level Link 1

Whenever you see a list, it means its CSS Display property has the “block” value. When you do not see a list, it means its CSS Display property has the “none” value.

All of the lists should be in one HTML containing block e.g. a DIV element.