我很简单的说一下原理(后面附有我写的部分servlet代码),其他的页面修饰请自己完成:
<table>
<tr><td>测试节点
<table id="submenu1" style="display:none" onclick="change(this)"><tr><td>测试子节点</td></tr></table>
</td></tr>
</table>
1#先循环生成基本的框架,主要的功能由函数change()来实现菜单show和hide.
2#简单的功能函数
function change(object){
var srcobj=document.all(object);
if(srcobj.style.display=="none")
{
srcobj.style.display="";
}
else
{
srcobj.style.display="none";
}
}
3#我写的部分代码(为公司用的呀,不知道公司会不会怪我,哈哈)
import java.lang.*;
import java.io.*;
import java.sql.*;
import java.util.*;class dynmenu{
private static final String IMAGE_PATH="/icon/wistron/"; 
private String tablename="test";private Vector baseMenus=new Vector();
private  Connection  conn=null;
private  Statement   stmt=null;
private  Statement   stmtEx=null;
private  ResultSet   redset=null;
private  ResultSet   redsetEx=null;
public  void initDataBase(String url, String driverName,String user, String passwd)
{
 try {
            Class.forName(driverName);
            conn = DriverManager.getConnection(url, user, passwd);
            stmt = conn.createStatement();
            stmtEx = conn.createStatement();
          }
         catch (ClassNotFoundException ex) {
            System.err.println("Cannot find the database driver classes.");
            System.err.println(ex);
          }
         catch (SQLException ex) {
            System.err.println("Cannot connect to this database.");
            System.err.println(ex);
          }
}public void  createMenu(){
String functionName=null;
String functionUrl=null;
String functionlevel=null;
Vector toplevel=new Vector();

if((conn==null)||(stmt==null)){
System.err.println("Please initilization database connect!");
}

try{
redset=stmt.executeQuery("select * from "+tablename+" where level like '%00'");

while(redset.next()){
functionName=redset.getString(1);
functionUrl=redset.getString(2);
functionlevel=redset.getString(3);
Vector pair=new Vector();
pair.addElement(functionName);
pair.addElement(functionUrl);
toplevel=null;
toplevel=new Vector();
toplevel.addElement(pair);
String sublevel=functionlevel.substring(0,2);
redsetEx=stmtEx.executeQuery("select * from "+tablename+" where (level like '"+sublevel+"%') and not(level like '"+sublevel+"00')");
while(redsetEx.next()){
functionName=redsetEx.getString("func");
functionUrl=redsetEx.getString("url");
functionlevel=redsetEx.getString("level");
pair=null;
pair=new Vector();
pair.addElement(functionName);
pair.addElement(functionUrl);
toplevel.addElement(pair);
}
baseMenus.addElement(toplevel);
}
}
catch(SQLException ex){System.out.println("error!");
ex.printStackTrace();
}
}
private void startHtml(PrintWriter out){
out.println("<HTML><HEAD><TITLE>Wistron | Web Visual Identity : Contact Us</TITLE>");
out.println("<STYLE type=text/css>");
out.println("A {COLOR: #000033; TEXT-DECORATION: underline}");
out.println("A:unknown {COLOR: #000033; TEXT-DECORATION: underline}");
out.println("A:unknown {COLOR: #000033; TEXT-DECORATION: underline}");
out.println("A:hover {COLOR: #6666ff; TEXT-DECORATION: none}");
out.println("</STYLE>");
out.println("<script language='javascript' src='/myweb/toolbar.js'></script>");
out.println("<LINK href='wistronstyle.css' rel=stylesheet type=text/css></head>");
out.println("<BODY bgColor='#ffffff' leftMargin='0' topMargin='0' marginheight='0' marginwidth='0' >");
}
private void endHtml(PrintWriter out){
out.println("</body></html>");
}
public void showMenu(PrintWriter out){
Vector vctTmp=null;
Vector vctTmp2=null;
int i=0;
int j=0;
String submenu="submenu";
startHtml(out);
out.println("<table width=100% border=0 cellspacing=0 cellpadding=0>");
out.println("<tr height=10><td></td></tr>");
out.println("<tr><td width='9%' height='11' bgcolor='#FFFFFF'>");
out.println("<img src='/icon/wistron/point_submenu.gif' width='16' height='18'>");
out.println("<a href='/examples/servlet/GetMenu' target='_self' ><font color='#0033cc'><b>Get Your Menu</b></font></a>");
out.println("</td></tr>");
createMenu();
if(baseMenus.size()>0){
for(i=0;i<baseMenus.size();i++){
vctTmp=(Vector)baseMenus.elementAt(i);
if(vctTmp.size()>1){
vctTmp2=(Vector)vctTmp.elementAt(0);
out.print("<tr>");
out.print("<td ><a onclick=change('");
out.print(submenu+i);
out.println("')> <font color='#0033cc'><b>"+vctTmp2.elementAt(0)+"</b></a>");
out.println("<table id="+submenu+i+" style=display:none align=center width=80%>");
for(j=1;j<vctTmp.size();j++)
{
vctTmp2=(Vector)vctTmp.elementAt(j);
out.print("<tr><td width='9%' height='11' bgcolor='#FFFFFF'>");
out.print("<img src='"+IMAGE_PATH+"point_submenu.gif' width='16' height='18'></td>");
out.println("<td><a href="+vctTmp2.elementAt(1)+"><font color='#0033cc' target='mainFrame'><b>");
out.println(vctTmp2.elementAt(0));
out.println("</b></a></td></tr>");
}
out.println("</table></td></tr>");
}
else
{
out.print("<tr><td width='9%' height='11' bgcolor='#FFFFFF'>");
out.print("<img src='"+IMAGE_PATH+"point_submenu.gif' width='16' height='18'></td>");
out.print("<td><a href='"+((Vector)vctTmp.elementAt(0)).elementAt(1)+"'><font color='#0033cc' target='mainFrame'><b>");
out.println(((Vector)vctTmp.elementAt(0)).elementAt(0)+"</b></a></td></tr>");
}
}
}

out.println("</table>");
endHtml(out);

}