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>

效果图


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

html+css3实现精美导航

下拉导航             *{margin:0px; padding:0px;} body{background:url('img/title.jpg')...

html树形菜单控件

jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree。 主页:http://bassistance.de/jquery-plugin...

HTML+JS+CSS自定义树形菜单

小编最近做项目的时候时常用到树形菜单(Treeview),一直用的是别人的插件,但有时候不符合自己的页面风格,修改样式、图标什么的都不方便,所以在这里我急写个方便修改样式什么的。 下面开始... ...

jquery+css实现html选择树或树形菜单

本文将介绍利用jquery+css实现html选择树或树形菜单的方法,无需其他插件,十分简洁明了。 主要利用标签加上样式调整。 先上效果图: 下面上CSS代码: li{ ...

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

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

纯CSS打造可折叠树状菜单

1:Html代码 下级 下级 下级 无限级 无限级 无限级 无限级 无限级 无限级 实现的思路是运用checkbox的checked值来判断下级栏目是否展开,CSS3的选...

纯CSS打造可折叠树状菜单

1:Html代码 下级 下级 下级 无限级 无限级 无限级 无限级 无限级 无限级 实现的思路是运用checkbox的checked值来判断下级栏目是否展开,CSS3的选...

使用CSS3实现树形控件

下面是一个使用HTML的ul标签制作的关于国家区划的组织结构图。 中国 北京 广东省 广州市 韶关市 海南省 海口市 美兰区 龙华区 秀英区 琼山区 三亚市 ...
  • tanghw
  • tanghw
  • 2011-12-26 05:45
  • 3770
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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