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.

Next: The UL and LI elements >>
 

More HTML Articles
More By Chrysanthus Forcha

Comments On: Building a Bulleted Menu Of Links: Display Method

>>> Be the FIRST to comment on this article!