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

谁践踏了优雅 2022-08-27 15:46 135阅读 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">
       
       <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">
            
            <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;">
                
                <li class="L3"><a href="fileList.action" target="mainRight">
    		    <span><img src="<%=basePath%>images/jian.png"  align="absMiddle"/> 文件列表</span> 
    		    </a>
    		    </li>
    		    
                <li class="L3"><a href="toUploadJsp.action" target="mainRight">
    		    <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 文件上传</span> 
    		    </a>
    		    </li>
            </ul>
            
            <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;">
                 
                 <li class="L3"><a href="" target="mainRight">
    			 <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000001</span> 
    			 </a>
    			 </li>
    			 
                 <li class="L3"><a href="" target="mainRight">
    			 <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000002</span> 
    			 </a>
    			 </li>
    			 
                 <li class="L3"><a href="" target="mainRight">
    			 <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000003</span> 
    			 </a>
    			 </li>
    			 
                 <li class="L3"><a href="" target="mainRight">
    			 <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000004</span> 
    			 </a>
    			 </li>
    			 
                 <li class="L3"><a href="" target="mainRight">
    			 <span><img src="<%=basePath%>images/jian.png"  align="absMiddle" /> 000005</span> 
    			 </a>
    			 </li>
            </ul>
       </ul>
       
       <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">
            
            <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")){%>
            
            <li class="L21">
            <a href="toAdminMain" target="right">
    	    <span><img src="<%=basePath%>images/jian.png" align="absMiddle" />用户管理</span>
    	    </a>
    	    </li>
    	    <%}%>
            
            <li class="L21">
            <a href="#" οnclick=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

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

![Center][]![Center 1][]

[Center]: https://img-blog.csdn.net/20140717172552718?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ2dzeDkxOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220823/4c5c860e7fd14e6889528403242f90a6.png