首页 > 代码库 > java--css+js做的树形菜单(完整版)
java--css+js做的树形菜单(完整版)
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 = http://www.mamicode.com/"../images/jian.png";>
图片资源：/images/jia.png，jian.png
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。