JavaScript+CSS实现经典的树形导航栏

2021-12-12

在一些管理系统里面，一般右侧都会有树形的导航栏，点击一下就会出现下拉菜单，显示出来该父菜单下面的子菜单
【JavaScript+CSS实现经典的树形导航栏】项目，然后配以图片，和CSS的效果，可以说是非常常用的功能，现在做一个项目，正好用到这个功能，于是到处寻找
资料，从Struts的Dojo插件到Dojo的学习，各种看，结果各种不懂。那个悲催啊！！！结果从头再来，苦学CSS和JS，
虽然现在JS水平不咋的，但是还是可以写出一个一般的导航菜单栏了，自己看看还是说的过去，这里拿出来Show一
下，回来自己好用。
首先上最开始的左侧菜单HTML代码
left.html - 锐客网基础信息管理
文章图片
主管单位信息
文章图片
建设单位信息
文章图片
监管单位信息
文章图片
礁石信息
文章图片
项目信息
文章图片
标书信息
招投标管理
文章图片
发布招标书
文章图片
修改招标信息
文章图片
查看投标标书
项目管理
文章图片
项目内容
文章图片
项目进度
文章图片
日志查询
文章图片
年度查询
文章图片
合同管理
然后是对应的CSS文件
#sidenav{ width: 300px; } .show{ display:block; width:190px; } .hidden{ display:none; background-color: white; } .fold{ width:20px; height:40px; padding:0px 10px 0px 10px; background-image:url("M1.gif"); background-repeat:no-repeat; } .fold1{ width:20px; height:40px; padding:0px 10px 0px 10px; background-image:url("M1.gif"); background-repeat:no-repeat; } .fold1 a{ font-size: 12px; background-image:url("/HTML/img/title.jpg"); padding-left: 30px; padding-right:50px; padding-top:55px; text-align: center; } .expend{ width:20px; height:20px; padding:0px 10px 0px 10px; background-image:url("M1.gif"); background-repeat:no-repeat; } .2blank{ width:20px; background-color: white; } a:LINK { text-decoration: none; } a:HOVER { color: red; } a:VISITED { color: gray; } .img1 img{ width: 1326px; height: 90px; }
然后是JavaScript代码
function changevisible(element){ var children = element.parentNode.childNodes; for(var i= 0; i 然后再放上一个整体的界面
all.html - 锐客网
效果图

转载于:https://www.cnblogs.com/sp2012/archive/2012/03/25/2465726.html

推荐阅读

上一篇：线性表之顺序存储结构（C语言动态数组实现）

下一篇：shell脚本自动修改linux下ifcfg-ethx文件