首先建立一個數據表menu
mId菜單主鍵
name 菜單名稱
url菜單鏈接
father 低級菜單ＩＤ
sub是否最底層菜單（用于判斷是否還可以繼續展開）
target 菜單鏈接目標(用ajax方式打開時作為顯示id)
pa 菜單參數(這項用于ajax方式打開菜單)
制作一個菜單對象類 class Menu{
private int mId;
private String name;
...//其它成員
public getMid(){
return mId;
}
public setMid(int mId){
this.mId = mId;
}
....//其它成員的get set方法，
}
另一個是操作類
class MenuOpt(){
public Vector getMenus(int father){
Vector vector = new Vector();
//這里是取得父級菜單ＩＤ為father的全部菜單
//并封裝進Vector的一個對象中。。
return vector;
}
}
其次就是一般的jsp文件了。但要注意以前說過的，不要包含標簽！
menu.jsp：
%@page contentType="text/html; charset=GB2312"%>
%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
jsp:useBean id="menu" scope="page" class="ycoe.basic.MenuOpt"/>
jsp:setProperty name="menu" property="father" value="${param.father}"/>
div>
c:forEach var="m" items="${menu.vector}" varStatus = "c">
c:choose>
c:when test="${m.sub eq 'Y'}">
div onClick="showMenu('${m.mid}','${m.url}','${m.target}','father=${m.mid}')">
img src="pic/menu0.gif" id="img${m.mid}" alt="" style=" cursor:hand;">
a href="#" class="text1">${m.name}
/div>
div style="display:none;" id="tr${m.mid}">
div style="padding-left:12pt" id="${m.mid}">
/div>
/c:when>
c:otherwise>
div onclick="openMenu('${m.url}','${m.target}','${m.pa}');">
img src="pic/menu1.gif" id="img${m.mid}" alt="">
a href="#" class="text1">${m.name}
/div>
menu.js：
//operMenu(打開下拉菜單的ＩＤ，打開的地址,鏈接打開的目標，參數)。
//這是用在menu.jsp的方法
function showMenu(id,url,target,param){
var trObj = document.getElementById("tr"+id);
var tdObj = document.getElementById(id);
//try{
if(document.getElementById("tr"+id).style.display == "none"){
//顯示菜單
if(tdObj.innerHTML == null || tdObj.innerHTML == ""){
//提取數據
document.getElementById("tr"+id).style.display = "";
document.getElementById("img"+id).src = "pic/menu2.gif"
Bcandy(id,"page/menu.jsp",param,"");
openMenu(url,target,param);
}else{
//如果里面有內容，直接顯示
document.getElementById("tr"+id).style.display = "";
document.getElementById("img"+id).src = "pic/menu2.gif"
openMenu(url,target,param);
}
//Bcandy(target,url,param,"");//打開菜單鏈接
}else{
//隱藏菜單
document.getElementById("tr"+id).style.display = "none";
document.getElementById("img"+id).src = "pic/menu0.gif"
}
//}catch(e){}
}
//打開菜單
function openMenu(url,target,param){
//這里不用我寫了吧。有好幾種實現方法，建議使用ajax實現！
}
最后是顯示頁面：
%@ page contentType="text/html; charset=GB2312" %>
meta http-equiv=Content-Type content="text/html; charset=gb2312">
style>
.text1:hover { border: 1px #999999 solid; background-color: #CCCCCC; height: 12px;} .text1{border: 1px #FFFFFF solid; height: 12px;}
function ini(){
Bcandy("0","menu.jsp","id=0&father=0","menu.js");
}
body onload="ini();">
div id="load" style="z-index:1; color:#FF0000; visibility:hidden; filter: Alpha (opacity=85); background-color:#FFFFFF; left: 48%; top: 48%;BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 12px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 12px;PADDING- BOTTOM: 12px; BORDER-LEFT: #000000 1px solid; LINE-HEIGHT: 22px; PADDING-TOP: 12px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute;">
img src='pic/loop.gif' alt="">
數據處理中，請稍候...
br>
div id="0" align="center">
可以看到，無論在哪個層面，都和傳統的沒什么分別，只有jsp部分除去文件頭而已（其實不去掉也行的，呵呵），而且，還可以看到，一個頁面，已經分成了好幾部分。就像之前說的那樣，積木式的（這是網上看到一篇關于.net框架的結構時作者提出的一種結構，覺得不錯，被我應用到JSP來了）。
在一些細節方面，我作了一些保留，請理解。但大致框架都是經過IE和FireFox測試。一些功能方面的擴展，自己想想了。
原理：其實就是應用了頁面遞歸！就和一般的遞歸方法一下，不過用在頁面上而已 div id="tr${m.id}"> 循環，將從封裝進vector的對象逐一顯示出來
for{
if(如果是最上層菜單sub=N){
div id="t${m.id}" onClick="ShowMenu(${m.father....})">
顯示菜單內容
div style="display:none" id="td${m.id....}">
}else{
div onClick="OpenMenu(${m.id})">顯示菜單內容
}
}
showMenu(father,id....)方法，將根據傳入的father去服務器里取得數據后，再次調用這個頁面。而這時，是將頁面的內容顯示在新的ＩＤ里面。這樣，看起來就有和ＭＳＤＮ里的樹菜單一樣的效果了。
優點：多級菜單多次獲取，加快了反應速度，同時應用了ajax請求，讓人感覺不到頁面的閃爍，親和力強。再者，可以JS里加入了代碼，讓用戶不用每次點擊都去獲取服務器數據，而是先判斷有沒有內容，沒有再取。同時，實現了菜單與頁面的同步，在每打開一級菜單，都可以在相應的地方打開頁面。同樣，這個operMenu()也可以采用ajax方式。
文章來源于領測軟件測試網 http://www.kjueaiud.com/
