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

项目，然后配以图片，和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实现经典的树形导航栏的更多相关文章

  1. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

  2. css三级下拉的导航栏

    #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: none;}# ...

  3. css怎样使顶端悬浮导航栏不遮住下面一层页面内容

    在两个层之间加这个<span class="blank" style="height:20px;"></span>,其中高度可以自己设置 ...

  4. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

  5. PHP全栈开发（八）：CSS Ⅹ 导航栏制作

    学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...

  6. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  7. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  8. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. JavaScript网站设计实践（二）实现导航栏当前所选页面的菜单项高亮显示

    一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...

随机推荐

  1. 《Linux内核分析》-----张超

    http://www.cnblogs.com/zhangchao0515/category/797954.html MOOC课程 http://mooc.study.163.com/course/US ...

  2. Linux之TCPIP内核参数优化

    /proc/sys/net目录 所有的TCP/IP参数都位于/proc/sys/net目录下(请注意,对/proc/sys/net目录下内容的修改都是临时的,任何修改在系统重启后都会丢失),例如下面这 ...

  3. URAL 1062 - Triathlon（半平面交）

    这个题乍眼一看好像很简单,然后我就认为u.v.w只要有全部比另外一个人小的就不能win,否则就能win,但是这个思路只对了一半 不能win的结论是正确的,但是win的结论不止排除这一个条件 将这个人与 ...

  4. Programming a Spider in Java 源码帖

    Programming a Spider in Java 源码帖 Listing 1: Finding the bad links (CheckLinks.java) import java.awt. ...

  5. css 权威指南笔记（一）

    零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...

  6. hdu 3450 Counting Sequences

    /* n*n暴力 这个很好想 */ #include<cstdio> #define maxn 100010 #define mod 9901 using namespace std; i ...

  7. 转换字符串格式，可用于sql in

    /// <summary> /// 转换字符串格式,可用于sql in /// </summary> /// <param name="lst"> ...

  8. PL/SQL 记录集合IS TABLE OF的使用

    在PL/SQL代码块中使用select into 赋值的话,有可能返回的是一个结果集.此时,如果使用基本类型或自定义的记录类型,将会报错. 因此,需要定义一个变量,是某种类型的集合.下面以一个基于表的 ...

  9. 关于封装的一个小问题和TA的例子

    写个小例子吧 --  很多细节(如校验.判断等等)都略了 其实不是有意写成这样,而是很多朋友都这么写(当然里面也有点夸张的写法) 这么写其实也没什么不好,简单明了,不用动脑子,一看就很直白, 但是如果 ...

  10. NetAdvantage webdatagrid 控件的一些属性

    属性: 1 behaviors 行为下的属性集合 Row Selectors 主要用于设置行选择样式与形为的集合 Enable 属性表示是否启用 Row Selectors下的属性设置 RowNumB ...