JavaScript+CSS实现经典的树形导航栏-白红宇

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

阅读量：5319 次

发布时间：2019-06-14

本文共 3059 字，大约阅读时间需要 10 分钟。

在一些管理系统里面，一般右侧都会有树形的导航栏，点击一下就会出现下拉菜单，显示出来该父菜单下面的子菜单

项目，然后配以图片，和CSS的效果，可以说是非常常用的功能，现在做一个项目，正好用到这个功能，于是到处寻找

资料，从Struts的Dojo插件到Dojo的学习，各种看，结果各种不懂。那个悲催啊！！！结果从头再来，苦学CSS和JS，

虽然现在JS水平不咋的，但是还是可以写出一个一般的导航菜单栏了，自己看看还是说的过去，这里拿出来Show一

下，回来自己好用。

首先上最开始的左侧菜单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/zhujiabin/p/4505278.html

你可能感兴趣的文章