Many web pages display their links in the form of a bulleted menu. You can make such menus a bit more interesting by adding functionality to expand and contract the menu, if it makes sense to divide the menu into levels. This two-part article will show you how to do it.
Building a Bulleted Menu Of Links: Display Method - Implementation (Page 3 of 4 )
For simplicity I will use the arrangement in Fig. 2 to explain how you can do the coding.
The IDs of the UL and LI elements have been given in a way that is useful in the code.
The IDs corresponding to the structure in Fig. 2 can be presented as follows to reflect the structure:
LI_1
UL_11
LI_11
UL_111
LI_12
UL_121
LI_13
UL_131
LI_2
UL_21
LI_21
UL_211
LI_22
UL_221
LI_23
UL_231
LI_3
UL_31
LI_31
UL_311
LI_32
UL_321
LI_33
UL_331
Fig.5 IDs
The IDs for the LI elements begin with LI (for List), then an underscore, and then a number. The IDs for the UL elements begin with UL (for Unordered List), then an underscore, and then a number.
The IDs for the first level link elements are LI_1, LI_2 and LI_3. The IDs for the UL elements associated with (below LI) these LI elements are respectively, UL_11, UL_21 and UL_31. Note the extra 1 added to the corresponding numbers of the UL elements. The IDs have been given, taking into consideration the levels.
The IDs for the LI elements inside the UL_11 element are LI_11, LI_12 and LI_13. The numbers for the UL_11 element and its first list element (LI_11) are the same. The IDs for the LI elements inside the UL_21 element are LI_21, LI_22 and LI_23. The numbers for the UL_21 element and its first list element (LI_21) are the same.
The IDs for the LI elements inside the UL_31 element are, LI_31, LI_32 and LI_33. The numbers for the UL_31 element and its first list element (LI_31) are the same. The ID for the UL element associated with (below) the LI_11 list element is UL_111; that for LI_12 is UL_121; that for LI_21 is UL_211; that for LI_23 is UL_231, etc. Note the extra 1 added.
The LI elements inside the UL elements for UL_111, UL_121, etc do not have IDs. In our structure (fig. 2), they cannot cause a sub-list to expand or collapse.
The very first parent UL element that contains all the elements does not need to have an ID. No ID has been indicated for it in the ID structure.
Each LI element has an onclick event. We shall talk about the events shortly.
HTML 
/ 3 
Completing a Bulleted Menu Of Links
