Creating a Collapsible Outline
Outlines are a popular navigation tool on the Web. Code Listing 15-2 offers an example of using dynamic styles to create an outline that expands or collapses as the user clicks various headings. Figure 15-5 displays the outline in its initial, collapsed form, with only the section headings visible. Figure 15-6 shows that when the user clicks Section 2 the section expands to display the chapter listings. If the user clicks Section 2 again, it collapses back to its original form.
Code Listing 15-2.
<HTML> <HEAD> <TITLE>Listing 15-2</TITLE> <STYLE> SPAN {font-size: 18pt; cursor: hand} .on {display: on} A {text-decoration: none} A:hover {color: red; text-decoration: underline} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // Set bSupportsDHTML to true for Internet Explorer 4 or later. var bDoesDHTML = ( (navigator.userAgent.indexOf("MSIE") >= 0) && (navigator.appVersion.substring(0,1) >= 4) ) // Only hide menu items if browser supports DHTML. if(bDoesDHTML){document.write("<STYLE>.off{display:none}</STYLE>")} function doSection(secNum){ if (bDoesDHTML){ //display the section if hidden; hide it if it is displayed if (secNum.className=="off"){secNum.className="on"} else{secNum.className="off"} } } //--> </SCRIPT> </HEAD> <BODY> <SPAN onclick="doSection(Sec1)"><B>Section 1</B></SPAN><BR> <DIV CLASS="off" ID="Sec1"> <A HREF="generic.htm">Chapter 1</A><BR> </DIV> <SPAN onclick="doSection(Sec2)"><B>Section 2</B></SPAN><BR> <DIV CLASS="off" ID="Sec2"> <A HREF="generic.htm">Chapter 2</A><BR> <A HREF="generic.htm">Chapter 3</A><BR> <A HREF="generic.htm">Chapter 4</A><BR> <A HREF="generic.htm">Chapter 5</A><BR> </DIV> <SPAN onclick="doSection(Sec3)"><B>Section 3</B></SPAN><BR> <DIV CLASS="off" ID="Sec3"> <A HREF="generic.htm">Chapter 6</A><BR> <A HREF="generic.htm">Chapter 7</A><BR> <A HREF="generic.htm">Chapter 8</A><BR> <A HREF="generic.htm">Chapter 9</A><BR> <A HREF="generic.htm">Chapter 10</A><BR> </DIV> </BODY> </HTML> |
Figure 15-5. The initial outline, in collapsed form.
Figure 15-6. The outline dynamically expands when the user clicks Section 2.
NOTE
Code Listing 15-2 is much more complex than most examples in this book. Because this example is more likely than most to be copied and used on the Web, care has been taken to ensure that it will provide a good experience across browsers. This sample has been designed to provide full functionality in Internet Explorer versions 4 and later, and to gracefully degrade in other browsers. In Internet Explorer 3 and all existing versions of Netscape Navigator, the outline will display fully opened from the start. See Chapter 23 for further discussion of creating cross browser Web pages. See Chapter 24 for a more full-featured version of an expandable menu.
The script block in Code Listing 15-2 has three major parts. The first part tests to make sure that the browser in use is Internet Explorer version 4 or later. If it is, the bDoesDHTML variable is set to true.
The next piece of code will add a line of code to the document if bDoesDHTML is true. This line of code is a STYLE element that creates a new class, off. Notice that the parts of the outline that we want to hide use this class. These items will be hidden only for users of Internet Explorer version 4 and later because we define the off class only for these users.
The final part of code in the script block is the doSection function, which uses the display property to show and hide text parts of the outline. Each section heading has an onclick event handler. When the user clicks a section, the doSection function is called and is passed the name of the element to be shown or hidden. If the class of the item is off, it will be changed to on and the element will be shown. If it was previously on (or anything else), it will be turned off and the element will be displayed.
When an element's display property is set to none, the element is invisible and the page is drawn without allocating space for the element. Like the display property, the visibility property can hide an element, but when this property is set to hidden, the element still takes up space on the screen. Code Listing 15-3 illustrates what happens when you use the visibility property to hide items instead of the display property. In Figure 15-7, you can see how Internet Explorer initially displays this outline, with only the section headings visible. Notice that the page is drawn to allow space for the contents of the section (the chapter listing) to be displayed. Figure 15-8 shows the effects of clicking Section 2; the chapter listing is displayed in the space following the Section 1 entry. If the user clicks Section 2 again, the chapter listing disappears but the space remains.
Code Listing 15-3.
<HTML> <HEAD> <TITLE>Listing 15-3</TITLE> <STYLE> SPAN {font-size: 18pt; cursor: hand} .on {visibility: on} A {text-decoration: none} A:hover {color: red; text-decoration: underline} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // Set bSupportsDHTML to true for Internet Explorer 4 or later. var bDoesDHTML = ( (navigator.userAgent.indexOf("MSIE") >= 0) && (navigator.appVersion.substring(0,1) >= 4) ) // Only hide menu items if browser supports DHTML. if(bDoesDHTML){document.write("<STYLE>.off{visibility:hidden}</STYLE>")} function doSection(secNum){ if (bDoesDHTML){ //display the section if hidden; hide it if it is displayed if (secNum.className=="off"){secNum.className="on"} else{secNum.className="off"} } } //--> </SCRIPT> </HEAD> <BODY> <SPAN onclick="doSection(Sec1)"><B>Section 1</B></SPAN><BR> <DIV CLASS="off" ID="Sec1"> <A HREF="generic.htm">Chapter 1</A><BR> </DIV> <SPAN onclick="doSection(Sec2)"><B>Section 2</B></SPAN><BR> <DIV CLASS="off" ID="Sec2"> <A HREF="generic.htm">Chapter 2</A><BR> <A HREF="generic.htm">Chapter 3</A><BR> <A HREF="generic.htm">Chapter 4</A><BR> <A HREF="generic.htm">Chapter 5</A><BR> </DIV> <SPAN onclick="doSection(Sec3)"><B>Section 3</B></SPAN><BR> <DIV CLASS="off" ID="Sec3"> <A HREF="generic.htm">Chapter 6</A><BR> <A HREF="generic.htm">Chapter 7</A><BR> <A HREF="generic.htm">Chapter 8</A><BR> <A HREF="generic.htm">Chapter 9</A><BR> <A HREF="generic.htm">Chapter 10</A><BR> </DIV> </BODY> </HTML> |
Figure 15-7. The initial outline, using the visibility property.
Figure 15-8. The outline is dynamically filled in when the user clicks Section 2.
NOTE
Code Listings 15-2 and 15-3 also demonstrate two other useful applications of CSS. Setting the cursor CSS attribute to hand for SPAN elements will make the mouse pointer change to a hand when it is positioned over the section headings. Additionally, note that A has text-decoration set to none and A:hover is set to appear red and underlined. This means that anchors do not appear underlined until the mouse passes over them, at which point they will display as red and underlined.
EAN: 2147483647
Pages: 128