树形菜单Demo
来源：互联网 发布：如何自学办公软件 编辑：程序博客网 时间：2024/05/07 17:19
menu.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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body class="panel" topmargin="0" leftmargin="0">
<div id="body" style="width: 200px"><!-- OA树开始-->
<ul id="menu">
<li class="L1"><a href="javascript:c(m01);" id="m01"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" /> 客户关系管理系统</span> </a></li>
<ul id="m01d" style="display: none;" class="U1">
<li class="L21"><a href="javascript:c(f01);" id="f01"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" /> 文件管理</span> </a></li>
<ul id="f01d" style="display: none;">
<li class="L3"><a href="fileList.action" target="mainRight"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" />文件列表</span> </a></li>
<li class="L3"><a href="toUploadJsp.action" target="mainRight"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" />文件上传</span> </a></li>
</ul>
<li class="L21"><a href="javascript:c(f02);" id="f02"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" />111111</span> </a></li>
<ul id="f02d" style="display: none;">
<li class="L3"><a href="" target="mainRight"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000001</span> </a></li>
<li class="L3"><a href="" target="mainRight"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000002</span> </a></li>
<li class="L3"><a href="" target="mainRight"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000003</span> </a></li>
<li class="L3"><a href="" target="mainRight"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000004</span> </a></li>
<li class="L3"><a href="" target="mainRight"><span><img
src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000005</span> </a></li>
</ul>
</ul>
</ul>
</div>
<div id="bottom"></div>
<script type="text/javascript" src="<%=basePath%>js/menu.js"></script>
</body>
</html>
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;
} else {
srcelement.className = "";
targetelement.style.display = "none";
menu_flag = 1;
var links = document.getElementsByTagName("A");
for (i = 0; i < links.length; i++) {
srcelement = links[i];
if (srcelement.parentNode.className.toUpperCase() == "L1"
&& srcelement.className == "active"
&& srcelement.id.substr(0, 1) == "m") {
menu_flag = 0;
break;
}
}
}
}
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);
}
//-------- 菜单全部展开/收缩 -------
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 = "";
}
}
}
}
//-------- 打开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");
}
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
}
IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 16px; BORDER-BOTTOM: 0px; HEIGHT: 16px
}
#body {
BORDER-RIGHT: #154b76 1px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #70a4cf; PADDING-BOTTOM: 10px; BORDER-LEFT: #154b76 1px solid; WIDTH: 100%; PADDING-TOP: 5px
}
#menu {
BORDER-RIGHT: #246191 1px solid; BORDER-TOP: #246191 1px solid; BACKGROUND: #ffffff; BORDER-LEFT: #246191 1px solid; BORDER-BOTTOM: medium none
}
.U1 {
BACKGROUND: #ffffff; BORDER-BOTTOM: #246191 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: 26px; PADDING-BOTTOM: 0px; PADDING-TOP: 7px
}
.L3 A:visited SPAN {
PADDING-RIGHT: 0px; PADDING-LEFT: 26px; PADDING-BOTTOM: 0px; PADDING-TOP: 7px
}
.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
}
main.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>主页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#left {
float: left;
}
#main {
width: 100%;
height: 100%;
align: center;
}
</style>
</head>
<body>
<div id="main">
<!-- 上侧 -->
<div><img src="<%=basePath%>images/maintop.jpg"
style="height: 20%; width: 100%;">
<table style="position: absolute; top: 60px; left: 780px">
<tr>
<td>当前用户：${sessionScope.worker.wname}</td>
<td><a href="loginOut.action"
style="text-decoration: none; font-weight: bold; color: #CF3">退出系统</a>
</td>
</tr>
</table>
</div>
<!-- 左侧 --> <iframe id="left" src="<%=basePath%>pages/main/menu.jsp"
height="75%" width="20%" frameborder="0" scrolling="auto"></iframe>
<!-- 右侧 -->
<iframe id="right" src="<%=basePath%>pages/main/welcome.jsp"
height="75%" width="80%" frameborder="0" scrolling="auto"
name="mainRight"></iframe>
<!-- 下侧 -->
<div
style="text-align: right; padding: 6px; font-size: 12px; color: dark-blue; scroll: no; border-top: solid 1px #666;">
© 2012xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
</div>
</body>
</html>
- 树形菜单Demo
- 树形菜单Demo
- Bootstrap 树形菜单小DEMO
- Easyui 动态加载树形菜单 四级demo
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- 树形菜单
- Indiegogo创始人分享成功融资六大秘诀
- CVBS全电视信号的一些基本知识
- 用PB实现客户端程序的自动升级
- 2012,我再次毕业了
- FileTracker : error FTK1011编译错误的解决办法
- 树形菜单Demo
- 软件数据线：电脑端管理安卓手机
- python socket
- UVa 133 - The Dole Queue
- Android 前后台判断
- Hibernate与Spring整合，配置文件applicationContext.xml
- 排序算法时间复杂度
- CVBS全电视信号的一些基本知识
- makefile 加参数
