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

               

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

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

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

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

下,回来自己好用。

首先上最开始的左侧菜单HTML代码

<html>  <head>    <title>left.htmltitle>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="/HTML/JavaScript/left.js">script<link rel="stylesheet" href="../css/left.css" type="text/css">link>head<body>  <div class="show"><span class="fold1" onclick="changevisible(this)"><a href="#">基础信息管理a>span>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="/HTML/test/right.html" target="right" >主管单位信息a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">建设单位信息a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">监管单位信息a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">礁石信息a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">项目信息a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">标书信息a>span>div>   div>   <br/>      <div class="show"><span class="fold1" onclick="changevisible(this)"><a href="#">招投标管理   a>span>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="/HTML/test/right1.html" target="right">发布招标书a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">修改招标信息a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">查看投标标书a>span>div>   div>   <br/>      <div class="show"><span class="fold1" onclick="changevisible(this)"><a href="#">项目管理       a>span>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">项目内容a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">项目进度a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">日志查询a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">年度查询a>span>div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/>span><span class="fold"><a href="#">合同管理a>span>div>   div>           body>html>

然后是对应的CSS文件

#sidenavwidth: 300px;}.show{    display:block;    width:190px;    }.hidden{    display:none;     background-color: white;}.foldwidth:20px;    height:40px;    padding:0px 10px 0px 10px;    background-image:url("M1.gif");    background-repeat:no-repeat;}.fold1width:20px;    height:40px;    padding:0px 10px 0px 10px;    background-image:url("M1.gif");    background-repeat:no-repeat;}.fold1 afont-size: 12pxbackground-image:url("/HTML/img/title.jpg"); padding-left: 30pxpadding-right:50pxpadding-top:55pxtext-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:LINKtext-decoration: none;}a:HOVERcolor: red;}a:VISITEDcolor: gray;}.img1 imgwidth: 1326pxheight: 90px;}

然后是JavaScript代码

   function changevisible(element){        var children = element.parentNode.childNodes;                for(var i= 0; iif(children[i].nodeName == "DIV"){                              var className = children[i].className;                                       if(className == "show" ){                               //      element.className="fold";                    children[i].className="hidden";                }               else{              //    element.className="expend";                     children[i].className="show";                }            }        }    }

然后再放上一个整体的界面

<html>  <head>    <title>all.htmltitlehead>    <frameset rows="20%,*" frameborder="no">    <frame src="/HTML/test/top.html"/>        <frameset cols="15%,*" frameborder="yes">      <frame src="/HTML/test/left.html" noresize="noresize"/>                  <frame src="/HTML/test/right.html" noresize="noresize" name="right"/>    frameset>      framesethtml>

效果图


           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

你可能感兴趣的:(JavaScript+CSS实现经典的树形导航栏)