Defining Outlines
Defining an outline with the Outline Toolkit is as simple as defining an HTML nested list. Below is the sample menu from the introduction page with its corresponding HTML:
Working Example only available in Internet Explorer 4.0.
<!-- The list is contained in a DIV so that a border and background can be specified -->
<DIV class=outlineMenu ONCLICK="doClickOutline()" ONMOUSEOVER="checkOverOutline()" ONMOUSEOUT="checkOutOutline()" ONSELECTSTART="return false">
<UL>
<!-- The first list item needs a special ID so that special style
information can be supplied -->
<LI ID=first><P>Item 1</P></LI>
<LI><SPAN class=outlineMore>+</SPAN><P>Item 2</P>
<UL>
<LI><P>Item <EM>2a</EM></P>
<LI><SPAN class=outlineMore>+</SPAN><P>Item 2a1</P>
<UL>
<LI><P>Item 2a1a</P>
<LI><P>Item 2a1b</P>
</UL>
</UL>
</LI>
<LI><SPAN class=outlineMore>+</SPAN><P><B>Item 3</B></P>
<UL>
<LI><P>Item 3a</P>
<LI><P>Item 3b</P>
</UL>
</LI>
<!-- An extra empty LI is needed to ensure the last list item gets
the appropriate events -->
<LI ID=endItem>
</UL>
</DIV>
The appearance of the list is transformed into an outline using a specially designed style sheet.
By supplying the outer DIV with class=outlineMenu, the outline appearance is automatically
applied to the contained list.
/* outlineMenu Style Sheet */
DIV.outlineMenu {float: left; cursor: default; background: lightgrey; border-top: 1pt #EEEEEE solid; border-left: 1pt #EEEEEE solid; border-bottom: 1pt gray solid; border-right: 1pt gray solid; width: 150pt; padding: 0pt; margin: 0pt; }
/* Turn off bullets */
DIV.outlineMenu LI, #slideMenu TD P {list-style-type: none
/* Remove margins */
DIV.outlineMenu UL {margin: 0pt}
/* Hide nested lists */
DIV.outlineMenu UL UL {display: none}
/* Define the background color */
DIV.outlineMenu UL LI {background: lightgrey}
/* Define the borders */
DIV.outlineMenu UL LI {background: lightgrey; border-top:1pt #BBBBBB solid;}
/* Do not double border the first item */
DIV.outlineMenu #first {border-top: none}
/* Define the style for each item. Add a small amount of padding for the + - indicators */
DIV.outlineMenu P {margin: 0pt; padding: 0pt; margin-left: 1em;
padding-left: .3em; padding-right: 12pt; text-indent: 0;font: 12pt arial}
/* Style for the + - indicators */
DIV.outlineMenu SPAN.outlineMore {position: absolute; width: 1em; text-align: center;
font:12pt symbol;}
/* Make sure the special list item added to the end does not take up any space */
DIV.outlineMenu #endItem {line-height: 0}
Whenever you define a sub-list for any item in the outline, you need to add + symbol to indicate
the outline can be expanded. The plus symbol is specified using the following HTML:
<SPAN class=outlineMore>+</SPAN>
The class=outlineMore is required so the underlying code knows how to process the indicator.
Next we discuss how to respond to a user selecting an item from the outline.
www.insideDHTML.com - © 1997 by Scott Isaacs
|