| Tutorial
3
How to create a dynamic Table of
Contents
Step 1: Use
Notepad to create an HTML document, using opening and closing HTML tags:
<HTML>
...
</HTML>
Step 2:
Create a Table of Contents using UL and LI elements.
<BODY>
<H2>Dynamic Table of Contents</H2>
<UL>British Columbia
<LI>Vancouver
<LI>Victoria
<LI>Langley
</UL>
<UL>Alberta
<LI>Calgary
<LI>Edmonton
</UL>
<UL>Washington
<LI>Redmond
<LI>Mount Vernon
</UL>
</BODY>
Step 3: Use
cascading style sheet rules to define styles for the Table of Contents.
<STYLE>
BODY {background-color: black; color: red; font: 12pt verdana;}
UL {cursor: hand}
</STYLE>
The first rule specifies that the font be
red in 12 point Verdana on black background. The second rule defines the cursor behavior -
when the mouse pointer passes over the UL tag, the cursor will change into a hand to
indicate more information is available.
Step 4: Add
style rules to display and hide the list items.
UL LI
{ display: none; font:
10pt; list-style: circle; }
UL.show LI { display: block; }
.default UL { color: white; }
UL.default LI { display: none; }
The UL LI rule defines the style of list
items within the unordered list. The UL.show LI rule defines the LI elements within unordered lists of CLASS "show". The .default UL rule uses CLASS "default" to define the default
state of the unordered list. The UL.default LI rule sets the default state for LI elements within unordered lists of
CLASS "default". The default state in this case is to hide the information.
Step 5:
Insert inline events in each UL tag. (Only the first unordered list is used in the
following example. Repeat the code for the other two lists.)
<UL
onclick="this.className='show';"
ondblclick="this.className='default';"
onmouseover="this.style.color='white';"
onmouseout="this.style.color='red'">
British Columbia
<LI>Vancouver
<LI>Victoria
<LI>Langley
</UL>
The onclick event activates the show rule to the UL tag.
The ondblclick
event activates the default rule to the UL tag.
The onmouseover
event changes the font color from red (default) to white. The onmouseout event assigns red to the
font color.
Step 6:
Insert an onselectstart event in the BODY tag to return a false value using the returnValue
property of the event object.
<BODY
onselectstart="event.returnValue=false;">
The code cancels the onselectstart event on the container
instead of on each unordered list.
Step 7:
Check your coding for error and save the document. Your document should look like this example. |