Bulleted Menu of Links
(Page 1 of 5 )
In this article, I will be going over the various features of a bulleted menu of links, including how to implement them in your web page. All explanations will be accompanied by code samples to help you through this process. If you want to learn more about this common web page function, then, by all means, keep reading.
Meaning
Many web pages have their links on the left side of the page in a column. Consider such a web page with the following three hypothetical links:
First Level Link 1
First Level Link 2
First Level Link 3
Fig.1 Three links
Each of these links is inside a list item of an unordered list. Note the bullet in front of each link. When you click a link, a new web page is obtained and displayed on the browser. Code can be written so that when you click a bullet, the corresponding list item “expands” to where you see another list of links associated with the list item. The following figure shows a case where all list items have been expanded:
First Level Link 1
- Second Level Link 11
Third Level Link 111
Third Level Link 112
Third Level Link 113
Second Level Link 12
Third Level Link 121
Third Level Link 122
Third Level Link 123
Second Level Link 13
Third Level Link 131
Third Level Link 132
Third Level Link 133
First Level Link 2
- Second Level Link 21
Third Level Link 211
Third Level Link 212
Third Level Link 213
- Second Level Link 22
Third Level Link 221
Third Level Link 222
- Third Level Link 223
- Second Level Link 23
Third Level Link 231
Third Level Link 232
- Third Level Link 233
First Level Link 3
- Second Level Link 31
Third Level Link 311
Third Level Link 312
- Third Level Link 313
- Second Level Link 32
Third Level Link 321
Third Level Link 322
Third Level Link 323
Second Level Link 33
Third Level Link 331
Third Level Link 332
Third Level Link 333
Fig.2 All expansion has taken place.
If you click its bullet again, while the list item is expanded, the list item should collapse, meaning its sub list should disappear.
Next: Operation from the User’s Point of View >>
More JavaScript Articles
More By Chrysanthus Forcha
