码迷，mamicode.com
首页 > 编程语言 > 详细

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

时间：2015-12-20 11:40:46      阅读：232      评论：0      收藏：0      [点我收藏+]

标签：

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" />改动password</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;
 //-------- 假设点击了展开或收缩button---------
 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 begin
function 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 end

function 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

技术分享技术分享


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

标签：

原文地址：http://www.cnblogs.com/gcczhongduan/p/5060419.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！