Production method:
Step 1: embed the code. Copy the following code to the
<Style>
<! --
# Foldheader {cursor: hand; font-weight: bold;
List-style-image: url(fold.gif )}
# Foldinglist {list-style-image: url(list.gif )}
// -->
</Style>
<Script language = "JavaScript1.2">
<! --
/**
* Based on Folding Menu Tree
* Dynamic Drive (www.dynamicdrive.com)
* For full source code, installation instructions,
* 100's more DHTML scripts, and Terms
* Use, visit dynamicdrive.com
*
* Updated to support arbitrarily nested lists
* By Mark Quinn (mark@robocast.com) November 2nd 1998
*/
Var head = "display :''"
Img1 = new Image ()
Img1.src = "fold.gif"
Img2 = new Image ()
Img2.src = "open.gif"
Function change (){
If (! Document. all)
Return
If (event. srcElement. id = "foldheader "){
Var srcIndex = event. srcElement. sourceIndex
Var nested = document. all [srcIndex + 1]
If (nested. style. display = "none "){
Nested. style. display =''
Event. srcElement. style. listStyleImage = "url(open.gif )"
}
Else {
Nested. style. display = "none"
Event. srcElement. style. listStyleImage = "url(fold.gif )"
}
}
}
Document. onclick = change
// -->
</Script>
Step 2: create a menu. Insert the code to the place where the tree directory appears on the page. The following is a sample code:
<Li id = "foldheader"> News
<Ul id = "foldinglist" style = "display: none" style = & {head};>
CNN
ABC News
Vancouver Sun
<Li id = "foldheader"> Games
<Ul id = "foldinglist" style = "display: none" style = & {head};>
GameSpot
Happy Puppy
Game Center
<Li id = "foldheader"> Software
<Ul id = "foldinglist" style = "display: none" style = & {head};>
Outer 1
Outer 2
<Li id = "foldheader"> Nested
