JavaScript+CSS实现经典的树形导航栏
在一些管理系统里面，一般右侧都会有树形的导航栏，点击一下就会出现下拉菜单，显示出来该父菜单下面的子菜单
项目，然后配以图片，和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= ; 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>
效果图
JavaScript+CSS实现经典的树形导航栏的更多相关文章
- css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...
- css三级下拉的导航栏
#menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: none;}# ...
- css怎样使顶端悬浮导航栏不遮住下面一层页面内容
在两个层之间加这个<span class="blank" style="height:20px;"></span>,其中高度可以自己设置 ...
- html、css实现导航栏5种常用下拉效果
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...
- PHP全栈开发（八）：CSS Ⅹ 导航栏制作
学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...
- 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...
- 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）
回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- JavaScript网站设计实践（二）实现导航栏当前所选页面的菜单项高亮显示
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...
随机推荐
- Java多线程，哲学家就餐问题
问题描述:一圆桌前坐着5位哲学家,两个人中间有一只筷子,桌子中央有面条.哲学家思考问题,当饿了的时候拿起左右两只筷子吃饭,必须拿到两只筷子才能吃饭.上述问题会产生死锁的情况,当5个哲学家都拿起自己右手 ...
- 手机相机ISO是什么
要说什么是ISO还要从传统胶片相机说起,ISO被 称为感光度,它是衡量传统相机所使用胶片感光速度的国际统一指标,其数值反映了胶片感光时的速度(其实是银元素与光线的光化学反应速率).而对于现在并不 使用 ...
- IOS-tableViewCell重用机制
IOS-tableViewCell重用机制 首先介绍tableViewCell原生cell的使用和重用机制 使用dequeueReusableCellWithIdentifier方法,这个方法会从缓存 ...
- 搬移到GitHub Page啦~
GitHub: https://github.com/BOT-Man-JL/ Page: https://BOT-Man-JL.github.io/
- Java基础知识强化之集合框架笔记31：集合之泛型类的概述和基本使用
1. 为什么会有泛型呢? (1)早期的Object类型可以接收任意的对象类型,但是在实际使用中,会有类型转换的问题,也存在这隐患,所以Java提供了泛型来解决这个安全问题. 2. 泛型类的使用: (1 ...
- 如何自定义echarts主题
上一篇,选择echarts原有的主题样式,那么如何自定义自己的主题 与选择原有主题类似 1.echarts官网地址http://echarts.baidu.com/echarts2/doc 在工具中 ...
- 配置Nginx 1.8支持PHP 5.6
启动PHP和Nginx 修改Nginx配置文件/usr/local/nginx/conf/nginx.conf server { listen ; server_name localhost; loc ...
- C# GridView点击某列打开新浏览器窗口
C# GridView点击某列打开新窗口的方式: (1)打开浏览器新窗口:蓝色部分 通过超链接. (2)打开模式化窗口:通过OnRowCommand事件,弹出模式化窗口. 具体如下: <asp: ...
- 自己写的自动生成动态边框的jquery小插件
思路就是在元素四周添加<ul>列表,然后周期性地改变它的颜色,实现动态的效果,不支持ie7.ie8 预览链接http://gorey.sinaapp.com/myBorder/border ...
- Axiom3D学习日记 3.Cameras, Lights, and Shadows
Camera 相机: 相机基础知识不写了,需要注意的是:axiom目前不支持同时操作多个相机. 创建,设置位置基本操作. _camera = _scene.CreateCamera("Mai ...