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

原创 2012年03月25日 21:03:54

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

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

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

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

下,回来自己好用。

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

<!DOCTYPE html>
<html>
  <head>
    <title>left.html</title>
	
    <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文件

#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<children.length;i++){
        	
            if(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";
                }
            }
        }
    }

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>all.html</title>

  </head>
  
  <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里面有一个name属性,用来表名属性来进行超链接替换 -->
  				<frame src="/HTML/test/right.html" noresize="noresize" name="right"/>
  		</frameset>
  		
  </frameset>
  
</html>

效果图


Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Freemarker 树形导航菜单(递归)

很多导航菜单是树形的,即一级一级往下细分,这样的结构固然需要用递归来处理。 对于Freemarker 来说,宏就相当于函数,其定义了签名及参数列表。 所以在页面应这样写: ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

【JS 设计模式 】用组合模式来实现树形导航--JS代码结构思路分析(二)

根据上一节中的HTML代码结构我们通过JS来渲染HTML代码,我们先提供一下JS的代码片段,这代码代码不是一个完整的代码是经过简化的。通过JS代码来分析如何组装HTML的; 我们先来分析一下面上面的代...

网页导航树的简单快速美观之实现

导航树在Web应用中较为广泛。它能够向浏览者展示清晰、层次分明的信息组织结构形式,从而使浏览者较易从总体上把握信息架构。 导航树目前讨论较多的导航树的实现,大多是编写JavaScript代码,无论从程...
  • hbccgg
  • hbccgg
  • 2011年05月02日 14:56
  • 2456

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

nginx代理配置403

pwd命令是查看当前目录的文件路径 进入到nginx安装目录下的conf/servers文件夹下 打开nginx配置文件,根据后面的域名 vi /data/nginx/conf/serv...

从高考到码农,毕业了

愿你出走半生,归来仍是少年 从高考到程序员,一晃就是6年,6年前,炎炎夏日,我还是风一样的骚年,运着球,以烈日当背景,阳光便是镁光灯,一双双篮球鞋早已磨损在那粗糙的水泥地上;而现在一双人字双我能拖一个...
  • kebi007
  • kebi007
  • 2017年06月23日 00:59
  • 2829
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript+CSS实现经典的树形导航栏
举报原因:
原因补充:

(最多只允许输入30个字)