|
EXAMPLE
Click on the folder icons to expand
and collapse the menus.
1) Insert this script in the <HEAD> section of the page.
2) Insert this script in the <BODY> section where you want the menu
tree to appear in the page.
3) Define the headers and the links of your menu
tree in this section of the first script:
function makeDatabase() {
outline = new makeArray(6) // the number of outlines plus one
outline[0] = new item(true, 'SimplytheBest.net', 0)
outline[1] = new item(false, '<A HREF="shareware.html">Shareware & Freeware</A>',
1)
outline[2] = new item(true, 'Scripts', 1)
outline[3] = new item(false, '<A HREF="javascripts/dhtml_scripts.html">DHTML Scripts</A>',
2)
outline[4] = new item(false, '<A HREF="cgiscripts/cgiscripts.html">CGI Scripts</A>',
2)
outline[5] = new item(false, '<A HREF="info/index.html">Information library</A>',
1)
4) Define where the images are stored in
this section of the first script:
function setImages() {
for (var i = 0; i < outline.length; ++i) {
if (outline[i].state)
if (outline[i].parent)
if (outline[i + 1].state)
outline[i].pic = '<A HREF="javascript:toggle(' + i + ')"><IMG
SRC="images/exploded.gif" BORDER=0></A>'
else
outline[i].pic = '<A HREF="javascript:toggle(' + i + ')"><IMG
SRC="images/collapsd.gif" BORDER=0></A>'
else
outline[i].pic = '<IMG SRC="images/child.gif" BORDER=0>'
5) Customize the font style and the indent
spacing for each nesting in this section of the second script:
document.write('<PRE><font face=arial
size=2>')
for (var i = 0; i < outline.length; ++i) {
if (outline[i].state) {
for (var j = 0; j < outline[i].depth * 5; ++j) { // place
five spaces for each nesting
document.write(' ')
}
Copy the below images by right
clicking on them and choosing "Save picture as", or use your own
images.
 
|
