文件夹一

　　　　　页面一

　　　　　页面二

　　　　　页面三

　　　　文件夹二

　　　　　页面一

　　　　　页面二

　　　　　页面三

　　　　文件夹三

　　　　　页面一

　　　　　　页面二

　　　　　页面三

源程序讲解：

NS4 = (document.layers) ? 1 : 0;

IE4 = (document.all) ? 1 : 0;

ver4 = (NS4 || IE4) ? 1 : 0;

声明几个变量。当用户的浏览器是IE时，变量IE4的值为1，当用户的浏览器是Netscape时，变量NS4的值为1，当用户的浏览器是IE或是Netscape时，变量ver4的值为1。

if (ver4)

{ with (document)

{write("");

} }

这段代码相当于一个样式，定义各个层的位置及显示状态

function getIndex(el)

{ ind = null;

for (i=0; i

{ whichEl = document.layers[i];

if (whichEl.id == el)

{ ind = i; break; } }

return ind; }

定义一个函数getIndex，功能是获得变量ind的值。

function arrange()

{ nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;

for (i=firstInd+1; i

{ whichEl = document.layers[i];

if (whichEl.visibility != "hide")

{ whichEl.pageY = nextY; nextY += whichEl.document.height; } } }

定义一个函数arrange（），功能就是定义一下页面上元素的位置。当菜单打开时，页面上菜单以下的东西的位置顺序往下推，菜单合起时，菜单以下的东西自动上移。

function initIt()

{ if (!ver4) return;

if (NS4) { for (i=0; i

{ whichEl = document.layers[i];

if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; }

arrange(); }

else { divColl = document.all.tags("DIV");

for (i=0; i

{ whichEl = divColl(i);

if (whichEl.className == "child")

whichEl.style.display = "none"; } } }

定义函数initIt()，页面载入时，首先调用该函数。功能是初始化菜单，让页面载入时，菜单处于未打开状态。

function expandIt(el) {

if (!ver4) return;

if (IE4) { whichEl = eval(el + "Child");

if (whichEl.style.display == "none") { whichEl.style.display = "block"; }

else { whichEl.style.display = "none"; } }

else { whichEl = eval("document." + el + "Child");

if (whichEl.visibility == "hide")

{ whichEl.visibility = "show"; }

else { whichEl.visibility = "hide"; } arrange(); } }

onload = initIt;

定义一个函数expandIt(el)。由于层的可见状态在IE浏览器和NetScape浏览器中的解释是不同的，所以要分别讨论，判断菜单的状态。如果菜单是打开的，那么当再点击时，子菜单就不可见；如果菜单是关闭状态，那么当再点击时，子菜单就可见。

。。。

页面三

这一部分是页面上所显示的部分，包括那些形象的小“文件夹”图标，和文字。

如果用户的浏览器是NetScape，先初始化一下变量。