制作方法：
第一步：嵌入代碼。把下面這段代碼復(fù)制到<head></head>標(biāo)簽之間。
<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 Of
* 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>
第二步：制作菜單。將代碼插入到頁面中要出現(xiàn)樹形目錄的地方。下面是一段代碼范例：
<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
<ul id=”foldinglist” style=”display:none” style=&{head};>
nested 1
nested 2
outer 3
outer 4
如果我們仔細(xì)分析一下的話不難發(fā)現(xiàn)制作列表的秘訣就是一個(gè)大的列表
<li id=”foldheader”>主目錄名稱
<ul id=”foldinglist” style=”display:none” style=&{head};>
<a href=”對應(yīng)地址 “>子目錄名稱
<a href=”對應(yīng)地址 “>子目錄名稱
<a href=”對應(yīng)地址 “>子目錄名稱
這樣的好處是添加子菜單非常容易只要不斷制作一些列表出來，并且加上連接就可以制作出下拉菜單了。如果要實(shí)現(xiàn)多級(jí)的子菜單也很容易只要將某項(xiàng)子菜單的id設(shè)置成為foldheader并且不加連接，后面的格式就如加灰部分一樣和前面的代碼是一樣的，嵌套使用。
第三步：將一段代碼復(fù)制到上面列表代碼的下面。
<script language=”javascript1.2″>
<!–
/**
* Get cookie routine by Shelley Powers
* (shelley.powers@ne-dev.com)
*/
function get_cookie(Name) {
var search = Name + “=”
var returnvalue = “”;
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = documents.cookie.indexOf(“;”, offset);
// set index of end of cookie value
if (end == -1) end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (get_cookie(window.location.pathname) != ”){
var openresults=get_cookie(window.location.pathname).split(” “)
for (i=0 ; i < openresults.length ; i++){
foldinglist[openresults[i]].style.display=”
document.all[foldinglist[openresults[i]].sourceIndex –
1].style.listStyleImage=”url(open.gif)”
}
}
if (document.all){
var nodelength=foldinglist.length-1
var nodes=new Array(nodelength)
var openones=”
}
function check(){
for (i=0 ; i <= nodelength ; i++){
if (foldinglist[i].style.display==”)
openones=openones + ” ” + i
}
documents.cookie=window.location.pathname+”=”+openones
}
if (document.all)
document.body.onunload=check
//–>
</script>
第四步：將文件夾和菜單項(xiàng)前面的小圖標(biāo)圖片文件復(fù)制到和網(wǎng)頁文件同樣的位置。命名規(guī)則：
關(guān)閉的文件夾：fold.gif
打開的文件夾：open.gif
菜單項(xiàng)目：list.gif
整個(gè)菜單就做好了。如果對于菜單文字不滿意，可以修改第一步中的
<style>
<!–
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//–>
</style>
這部分，當(dāng)然前提是你要懂得一些css代碼。
注：這個(gè)程序基本可以實(shí)現(xiàn)功能，但是有一個(gè)顯然的缺點(diǎn)，就是目錄的寬度沒有被控制起來，手狀的鼠標(biāo)的范圍太大