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

最新推荐文章于 2023-07-02 17:49:03 发布
最新推荐文章于 2023-07-02 17:49:03 发布
阅读量2k 收藏
点赞数
分类专栏： JAVA开发 文章标签： java jsp 树形菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanggsx918/article/details/37911141
版权

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="#" ο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 

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 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



W了个G
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+JS+CSS自定义树形菜单
u013267865的专栏
03-28 2万+
小编最近做项目的时候时常用到树形菜单（Treeview），一直用的是别人的插件，但有时候不符合自己的页面风格,修改样式、图标什么的都不方便，所以在这里我急写个方便修改样式什么的。 下面开始... 应用到技术：JavaScript/Css/HTML IDA：VS 2010   首先构造一下思路，需要哪些文件 1、js文件 2、Css文件 3、Html文件 4、图标 5、Juuer
订餐 - html + css + js
10-24
订餐 - html + css + js订餐 - html + css + js订餐 - html + css + js订餐 - html + css + js订餐 - html + css + js订餐 - html + css + js订餐 - html + css + js订餐 - html + css + js
各种树状结构JS特效
08-25
树状特效，树状结构，JS特效，树状特效，各种树形结构的菜单特效
动态html树形菜单模板,JS+CSS简易树状菜单Tree
weixin_34624426的博客
06-04 550
/p>"http://www.w3.org/TR/html4/loose.dtd">树形菜单实例-www.mb5u.comfunction showhide_obj(obj,icon){obj=document.getElementById(obj);icon=document.getElementById(icon);if (obj.style.display=="none"){//...
JS+CSS简单树形菜单实现方法
10-23
主要介绍了JS+CSS简单树形菜单实现方法,涉及JavaScript结合css动态操作页面元素结点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
网页制作-HTML+CSS+JAVAscript详细手册.zip
05-04
网页制作-HTML+CSS+JAVAscript详细手册： CSS2.0中文手册.chm Html和css网页标准指南.chm...JavaScript参考手册中文版.chm Javascript高级教程.CHM 样式表中文手册2.0.CHM 样式表滤镜中文手册.CHM 网页制作完全手册.chm
大一网页设计期末课设-公司网站-HTML+CSS+JS前端课设
06-23
大一网页设计期末课设-公司网站-HTML+CSS+JS前端课设；详情看我的文章介绍 https://blog.csdn.net/weixin_43474701/article/details/131345702 大一网页设计期末课设-公司网站-HTML+CSS+JS前端课设；详情看我的文章...
前端网页设计-旅游城市介绍-html+css+javascript
最新发布
12-27
一页式前端静态网页，旅游主题，城市介绍
一种JS做的树
11-26
var myTree = null; function CreateTree() { myTree = new ECOTree('myTree','myTreeContainer'); myTree.config.colorStyle = ECOTree.CS_LEVEL; myTree.config.nodeFill = ECOTree.NF_FLAT; myTree.config.selectMode = ECOTree.SL_NONE; //是否允许给节点加链接，是否允许给节点加图片 myTree.config.useTarget = false; myTree.config.useImg = true; 　　//设置节点的大小和间隔 myTree.config.defaultNodeWidth = 95; myTree.config.defaultNodeHeight = 140; myTree.config.iSubtreeSeparation = 50; myTree.config.iSiblingSeparation = 15; myTree.config.iLevelSeparation = 30; //此处通过从数据库或其它地方读取节点信息，生成添加节点的代码 //参数前三位是必须的； //第一位是本节点id，第二位是父节点id、根节点的父节点为-1，第三位为节点文本； //第四位为节点上显示的图片/照片、图片放到img下并在数据库中记录名称即可，未设参数则取默认图片； //第五位为超链接、最好是访问统一程序传入本节点id； //第六、七位为节点的个性化宽、高。 myTree.add('01',-1,'总裁','./img/0.jpg','http://www.jq-school.com'); myTree.add('02','01','技术副总裁','./img/1.jpg'); myTree.add('03','01','总裁助理','./img/2.jpg','http://www.jq-school.com',95,130); myTree.add('04','01','分公司','./img/3.jpg','http://www.jq-school.com',95,130); myTree.add('0201','02','技术经理','./img/4.jpg','http://www.jq-school.com',95,130); myTree.add('0202','02','技术员','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0301','03','秘书','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0302','03','助理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0401','04','总经理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0402','04','财务','./img/7.jpg','http://www.jq-school.com',95,130); myTree.UpdateTree(); } 包含有例子和源码。
JS制作的树形菜单
09-03
基于js实现的树形结构,各种各样，类似于windows左边窗体的结构。
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
07-11
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
一个js树形菜单
04-18
这是一款基本js技术的树形菜单
JS中树形菜单制作
04-25
js中关于制作动态网页的树形制作菜单！ 有关制作动态网页必备 制作左边的树形结构图！
HTML + CSS + JS实现页面树形菜单展示功能
不负好时光
11-18 2993
HTML + CSS + JSS实现页面树形菜单展示功能后端代码前端代码CSS样式JSHTML 后端代码 通过递归查出树形菜单结构 private List<WzAuthorityBO> getAuthorityTree(String parentId) { List<WzAuthorityBO> list = new ArrayList<>(); List<WzAuthority> wzAuthorities = wzAuth
js树状菜单制作
m0_73481765的博客
07-02 351
这段代码为树形菜单的每个li元素添加了一个单击事件监听器。当用户单击它时，它会查找它的子菜单并将其显示或隐藏。它还为菜单项添加了一个“open”类，以便我们可以使用CSS样式控制其外观。使用JavaScript创建一个事件侦听器，以便用户单击菜单项时显示或隐藏其子菜单。首先，在HTML中创建一个带有ul和li标记的基本树形结构。现在，我们已经创建了一个简单的可展开/折叠的树形菜单！添加CSS样式以控制树形菜单的外观和布局。
原生js手动实现一个多级树状菜单效果（高度可过渡变化） + 模拟el-menu组件实现（简单版）
pscool的博客
05-13 2098
效果图 代码 要点 需要注意这个dom结构， 过渡动画一定要有开始和结束值才能产生动画，并且在js里面修改的时候，不能连着修改，要把第二次修改放到setTimeout里面 为了让菜单能够不是一次性过渡（让它可以一直产生过渡动画），需要在动画结束后，清理掉设置的高度，这个设置的高度只需要在动画的时候生效。 <style lang="scss" scoped> @import url(//at.alicdn.com/t/c/font_4065865_kb7oyb2wje9.css); ul,
JavaWeb配合layui框架写好看顺畅的用户角色权限登录
星辰里的月光
02-05 2563
用户角色登录系统我这次写了四个用户角色供大家参考，配合前端框架layui，layui官网：https://www.layui.com/ 效果图： 遵循MVC三层架构JavaWeb小项目登录； 首先是entity层 package xinlong.entity; /** * 用户角色 */ public class UserInfo { private int userID;//id...
html+jquery树形菜单,CSS+HTML+JQuery简单菜单
05-19
HTML + jQuery 树形菜单的实现可以分为以下几个步骤： 1. HTML 结构设计 ```html <span class="tree-node">节点1 <span class="tree-node">节点1.1 <span class="tree-node">节点1.2 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值