java--css+js做的树形菜单(完整版)

来源：互联网发布：上古世纪没人玩知乎编辑：程序博客网时间：2024/05/23 00:00

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://"   + request.getServerName() + ":" + request.getServerPort()   + path + "/";%><html> <link rel="stylesheet" type="text/css" href="<%=basePath%>css/menu.css"> <head>  <title>树形菜单</title> </head><body class="panel" topmargin="0" leftmargin="0"><div id="body" style="width: 186px">  <!-- 树形结构菜单  -->  <ul id="menu">   <!-- levelOne 一 -->   <li class="L1">   <a href="javascript:c(OneLevelOne01);" id="OneLevelOne01">   <span><img src="<%=basePath%>images/jia.png" id="OneLevelOne01Image" align="absMiddle"/> 客户关系管理系统</span>    </a>   </li>   <ul id="OneLevelOne01d" style="display: none;" class="U1">        <!-- levelTwo -->        <li class="L21">        <a href="javascript:c(OneLevelTwo01);" id="OneLevelTwo01">    <span><img src="<%=basePath%>images/jia.png"  align="absMiddle" id="OneLevelTwo01Image"/> 文件管理</span>    </a>    </li>        <ul id="OneLevelTwo01d" style="display: none;">            <!-- levelThree -->            <li class="L3"><a href="fileList.action" target="mainRight">    <span><img src="<%=basePath%>images/jian.png"  align="absMiddle"/> 文件列表</span>     </a>    </li>    <!-- levelThree -->            <li class="L3"><a href="toUploadJsp.action" target="mainRight">    <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 文件上传</span>     </a>    </li>        </ul>        <!-- levelTwo -->        <li class="L21">        <a href="javascript:c(OneLevelTwo02);" id="OneLevelTwo02"><span><img src="<%=basePath%>images/jia.png"  align="absMiddle" id="OneLevelTwo02Image" /> 111111</span> </a></li>        <ul id="OneLevelTwo02d" style="display: none;">             <!-- levelThree -->             <li class="L3"><a href="" target="mainRight"> <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000001</span>  </a> </li> <!-- levelThree -->             <li class="L3"><a href="" target="mainRight"> <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000002</span>  </a> </li> <!-- levelThree -->             <li class="L3"><a href="" target="mainRight"> <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000003</span>  </a> </li> <!-- levelThree -->             <li class="L3"><a href="" target="mainRight"> <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000004</span>  </a> </li> <!-- levelThree -->             <li class="L3"><a href="" target="mainRight"> <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000005</span>  </a> </li>        </ul>   </ul>   <!-- levelOne：账号管理  -->   <li class="L1">   <a href="javascript:c(TwoLevelOne02);" id="TwoLevelOne02">   <span><img src="<%=basePath%>images/jia.png" id="TwoLevelOne02Image" align="absMiddle"/> 账号管理</span>    </a>   </li>   <ul id="TwoLevelOne02d" style="display: none;" class="U1">        <!-- levelTwo： -->        <li class="L21">        <a href="#" target="right">    <span><img src="<%=basePath%>images/jian.png" align="absMiddle" />修改密码</span>    </a>    </li>    <%if(session.getAttribute("user.type").toString().equals("1")){%>        <!-- levelTwo -->        <li class="L21">        <a href="toAdminMain" target="right">    <span><img src="<%=basePath%>images/jian.png" align="absMiddle" />用户管理</span>    </a>    </li>    <%}%>        <!-- levelTwo  -->        <li class="L21">        <a href="#" onclick=top.location.replace("Quit")><span><img  src="<%=basePath%>images/jian.png"  align="absMiddle" />退出系统</span> </a></li>   </ul>  </ul></div><div id="bottom"></div><script type="text/javascript" src="<%=basePath%>js/menu.js"></script></body></html>

css文件：/css/menu.css

{ PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}HTML { OVERFLOW-Y: scroll}A:link { COLOR: #000000; TEXT-DECORATION: none}A:visited { COLOR: #000000; TEXT-DECORATION: none}A:active { COLOR: #3333ff; TEXT-DECORATION: none}A:hover { COLOR: #ff0000; TEXT-DECORATION: none}.panel { BACKGROUND: #d6e4ef; COLOR: #000000}#expand_link { FONT-SIZE: 9pt; LEFT: 140px; POSITION: absolute; TOP: 11px; TEXT-DECORATION: underline}UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; list-style-type:none; url("../images/toright.png");}IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 16px; BORDER-BOTTOM: 0px; HEIGHT: 16px;}#body { BORDER-RIGHT: #ffffff 0px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; BORDER-LEFT: #ffffff 0px solid; WIDTH: 100%; PADDING-TOP: 25px}#menu { BORDER-RIGHT: #246191 0px solid; BORDER-TOP: #246191 0px solid; BACKGROUND: #ffffff; BORDER-LEFT: #246191 0px solid; BORDER-BOTTOM: medium none}.U1 { BACKGROUND: #ffffff; BORDER-BOTTOM: #ffffff 1px solid}.L1 A:link { DISPLAY: block; FONT-SIZE: 9pt; BACKGROUND: url(../images/img/menu1_bg.png); COLOR: #476074; HEIGHT: 24px; TEXT-DECORATION: none}.L1 A:visited { DISPLAY: block; FONT-SIZE: 9pt; BACKGROUND: url(../images/img/menu1_bg.png); COLOR: #476074; HEIGHT: 24px; TEXT-DECORATION: none}.L1 A:link SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 16px; BACKGROUND: url(../images/ico/ar1.png) no-repeat left 50%; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 7px; HEIGHT: 24px}.L1 A:visited SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 16px; BACKGROUND: url(../images/ico/ar1.png) no-repeat left 50%; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 7px; HEIGHT: 24px}.L1 A:hover { FONT-WEIGHT: bold; BACKGROUND: url(../images/img/menu1_bg.png) 0px -24px; COLOR: #000000}.L1 A.active:link { BACKGROUND: url(../images/img/menu1_bg.png) 0px -24px}.L1 A.active:hover { BACKGROUND: url(../images/img/menu1_bg.png) 0px -24px}.L1 A.active:active { BACKGROUND: url(../images/img/menu1_bg.png) 0px -24px}.L1 A.active:visited { BACKGROUND: url(../images/img/menu1_bg.png) 0px -24px}.L1 A.active:link SPAN { FONT-WEIGHT: bold; BACKGROUND: url(../images/ico/ad1.png) no-repeat left 50%; COLOR: #000000}.L1 A.active:hover SPAN { FONT-WEIGHT: bold; BACKGROUND: url(../images/ico/ad1.png) no-repeat left 50%; COLOR: #000000}.L1 A.active:active SPAN { FONT-WEIGHT: bold; BACKGROUND: url(../images/ico/ad1.png) no-repeat left 50%; COLOR: #000000}.L1 A.active:visited SPAN { FONT-WEIGHT: bold; BACKGROUND: url(../images/ico/ad1.png) no-repeat left 50%; COLOR: #000000}.L21 A:link { DISPLAY: block; PADDING-LEFT: 13px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #444659; HEIGHT: 24px; TEXT-DECORATION: none}.L21 A:visited { DISPLAY: block; PADDING-LEFT: 13px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #444659; HEIGHT: 24px; TEXT-DECORATION: none}.L22 A:link { DISPLAY: block; PADDING-LEFT: 13px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #444659; HEIGHT: 24px; TEXT-DECORATION: none}.L22 A:visited { DISPLAY: block; PADDING-LEFT: 13px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #444659; HEIGHT: 24px; TEXT-DECORATION: none}.L3 A:link { DISPLAY: block; PADDING-LEFT: 13px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #444659; HEIGHT: 24px; TEXT-DECORATION: none}.L3 A:visited { DISPLAY: block; PADDING-LEFT: 13px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #444659; HEIGHT: 24px; TEXT-DECORATION: none}.L21 A:link SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 16px; BACKGROUND: url(../images/ico/ar.png) no-repeat left center; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 7px}.L21 A:visited SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 16px; BACKGROUND: url(../images/ico/ar.png) no-repeat left center; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 7px}.L22 A:link SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 16px; BACKGROUND: url(../images/ico/ar.png) no-repeat left center; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 7px}.L22 A:visited SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 16px; BACKGROUND: url(../images/ico/ar.png) no-repeat left center; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 7px}.L3 A:link SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 16px; BACKGROUND: url(../images/ico/ar.png) no-repeat left center; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 7px}.L3 A:visited SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 16px; BACKGROUND: url(../images/ico/ar.png) no-repeat left center; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 7px}.L22 A:link SPAN { BACKGROUND: none transparent scroll repeat 0% 0%}.L22 A:visited SPAN { BACKGROUND: none transparent scroll repeat 0% 0%}.L3 A:link SPAN { BACKGROUND: none transparent scroll repeat 0% 0%}.L3 A:visited SPAN { BACKGROUND: none transparent scroll repeat 0% 0%}.L21 A:hover { FONT-WEIGHT: bold; BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat left top}.L22 A:hover { FONT-WEIGHT: bold; BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat left top}.L3 A:hover { FONT-WEIGHT: bold; BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat left top}.L3 A:link SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 25px; PADDING-BOTTOM: 3px; PADDING-TOP: 12px}.L3 A:visited SPAN { PADDING-RIGHT: 0px; PADDING-LEFT: 25px; PADDING-BOTTOM: 3px; PADDING-TOP: 12px}.L21 A.active:link { BACKGROUND: none transparent scroll repeat 0% 0%}.L21 A.active:hover { BACKGROUND: none transparent scroll repeat 0% 0%}.L21 A.active:active { BACKGROUND: none transparent scroll repeat 0% 0%}.L21 A.active:visited { BACKGROUND: none transparent scroll repeat 0% 0%}.L21 A.active:link SPAN { FONT-WEIGHT: bold; BACKGROUND: url(../images/ico/ad.png) no-repeat left center; COLOR: #000000}.L21 A.active:hover SPAN { FONT-WEIGHT: bold; BACKGROUND: url(../images/ico/ad.png) no-repeat left center; COLOR: #000000}.L21 A.active:active SPAN { FONT-WEIGHT: bold; BACKGROUND: url(../images/ico/ad.png) no-repeat left center; COLOR: #000000}.L21 A.active:visited SPAN { FONT-WEIGHT: bold; BACKGROUND: url(../images/ico/ad.png) no-repeat left center; COLOR: #000000}.L22 A.active:link { BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat 0px -24px}.L22 A.active:hover { BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat 0px -24px}.L22 A.active:active { BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat 0px -24px}.L22 A.active:visited { BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat 0px -24px}.L3 A.active:link { BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat 0px -24px}.L3 A.active:hover { BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat 0px -24px}.L3 A.active:active { BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat 0px -24px}.L3 A.active:visited { BACKGROUND: url(../images/btn/menu2_bg.png) no-repeat 0px -24px}.L22 A.active:link SPAN { FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ffffff}.L22 A.active:hover SPAN { FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ffffff}.L22 A.active:active SPAN { FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ffffff}.L22 A.active:visited SPAN { FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ffffff}.L3 A.active:link SPAN { FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ffffff}.L3 A.active:hover SPAN { FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ffffff}.L3 A.active:active SPAN { FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ffffff}.L3 A.active:visited SPAN { FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ffffff}.Ls A:link { PADDING-RIGHT: 4px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-TOP: 4px; HEIGHT: 20px; TEXT-ALIGN: right; TEXT-DECORATION: underline}.Ls A:visited { PADDING-RIGHT: 4px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-TOP: 4px; HEIGHT: 20px; TEXT-ALIGN: right; TEXT-DECORATION: underline}.Ls A:hover { PADDING-RIGHT: 4px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-TOP: 4px; HEIGHT: 20px; TEXT-ALIGN: right; TEXT-DECORATION: underline}.Ls A:active { PADDING-RIGHT: 4px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-TOP: 4px; HEIGHT: 20px; TEXT-ALIGN: right; TEXT-DECORATION: underline}#bottom { BACKGROUND: url(../images/img/menu_bottom_bg.gif) no-repeat; HEIGHT: 80px}

js文件：/js/menu.js

var cur_id = "";var flag = 0, sflag = 0;//-------- 菜单点击事件 -------function c(srcelement) { var targetid, srcelement, targetelement; var strbuf; //-------- 如果点击了展开或收缩按钮--------- targetid = srcelement.id + "d"; targetelement = document.getElementById(targetid); if (targetelement.style.display == "none") {  //展开  srcelement.className = "active";  targetelement.style.display = '';  menu_flag = 0;    var imgElt = document.getElementById(srcelement.id+"Image");       imgElt.src = "../images/jian.png";   } else {  //收缩  srcelement.className = "";  targetelement.style.display = "none";//收缩  menu_flag = 1;    var imgElt = document.getElementById(srcelement.id+"Image");       imgElt.src = "../images/jia.png"; }}//-------- 菜单全部展开/收缩 -------var menu_flag = 1;function menu_expand() { if (menu_flag == 1)  expand_text.innerHTML = "收缩"; else  expand_text.innerHTML = "展开"; menu_flag = 1 - menu_flag;// var links = document.getElementsByTagName("A");// for (i = 0; i < links.length; i++) {//  srcelement = links[i];//  if (srcelement.parentNode.className.toUpperCase() == "L1"//    || srcelement.parentNode.className.toUpperCase() == "L21") {//   targetelement = document.getElementById(srcelement.id + "d");//   if (menu_flag == 0) {//    targetelement.style.display = '';//    srcelement.className = "active";//   } else {//    targetelement.style.display = "none";//    srcelement.className = "";//   }//  }// } }function set_current(id) { cur_link = document.getElementById("f" + cur_id) if (cur_link)  cur_link.className = ""; cur_link = document.getElementById("f" + id); if (cur_link)  cur_link.className = "active"; cur_id = id;}//-------- 打开网址 -------function a(URL, id) { set_current(id);// if (URL.substr(0, 7) != "http://" && URL.substr(0, 6) != "ftp://")//  URL = "/general/" + URL; parent.openURL(URL, 0);}function b(URL, id) { set_current(id);// URL = "/app/" + URL; parent.openURL(URL, 0);}//add by YZQ 2008-03-05 beginfunction bindFunc() { var args = []; for ( var i = 0, cnt = arguments.length; i < cnt; i++) {  args[i] = arguments[i]; } var __method = args.shift(); var object = args.shift(); return (function() {  var argsInner = [];  for ( var i = 0, cnt = arguments.length; i < cnt; i++) {   argsInner[i] = arguments[i];  }  return __method.apply(object, args.concat(argsInner)); });}var timerId = null;var firstTime = true;//add by YZQ 2008-03-05 endfunction d(URL, id) { //add by YZQ 2008-03-05 begin var winMgr = parent.parent.table_index.main.winManager; if (!winMgr) {  if (firstTime) {   parent.openURL("/fis/common/frame.jsp", 0);   firstTime = false;  }  timerId = setTimeout(bindFunc(d, window, URL, id), 100);  return; } firstTime = true; if (timerId) {  clearTimeout(timerId); } if (winMgr) {  winMgr.openActionPort("/fis/" + URL,    document.getElementById("f" + id).innerText);  return; } //add by YZQ 2008-03-05 end set_current(id); URL = "/fis/" + URL; parent.openURL(URL, 0);}//-------- 打开windows程序 -------function winexe(NAME, PROG) { URL = "/general/winexe?PROG=" + PROG + "&NAME=" + NAME; window   .open(     URL,     "winexe",     "height=100,width=350,status=0,toolbar=no,menubar=no,location=no,scrollbars=yes,top=0,left=0,resizable=no");}

图片资源：/images/jia.png，jian.png

0 0