div+css树形菜单

自己做过的项目从来没有这种东西，但见过别人的项目都有，未免落伍，学来看看，也不知道自己找到的这个是不是正路子，先贴代码再分析。

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css" media="all">

a,a:visited {color:#333;text-decoration:none;}

a:hover {color:#f60;}

body,td {font:13px "Geneva","宋体", "Arial", "Helvetica",sans-serif;}

ul,li {margin:0;padding:0;list-style:none;}

h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}

h1 {padding:5px;color:#900;font:16px bold "Geneva","宋体", "Arial", "Helvetica",sans-serif;}

h1 small {font-size:11px;font-weight:normal;color:#660;}

.tree_out {width:200px;}

.tree_1 .tree_tit a,

.tree_1 .tree_tit a:visited,

.tree_2 .tree_tit a,

.tree_2 .tree_tit a:visited {margin-left:10px;padding-left:40px;color:#003;font-size:12px;display:block;}

.tree_2 .tree_tit h3.Lst a {line-height:250%;background: #FF0000;}

.tree_2 .tree_txt {display:none;}

.tree_1 .tree_txt ul li {padding-left:65px;line-height:150%;}

.tree_1 .tree_txt .num {color:#e00;}

</style>

<script type="text/javascript">

    <!--

    function ExChgClsName(Obj,NameA,NameB){

        var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj;

        Obj.className=Obj.className==NameA?NameB:NameA;

    }

    function showmenu_tree(iNo){

        ExChgClsName("tree_id__"+iNo,"tree_1","tree_2");

    }

    -->

</script>

</head>

<body>

<div class="tree_out">

    <div class="tree_1" id="tree_id__0">

        <div class="tree_tit"><h3><a href="javascript:showmenu_tree(0);">一号主菜单</a></h3></div>

        <div class="tree_txt">

            <ul>

                <li><a>一号子菜单</a></li>

                <li><a>二号子菜单</a></li>

                <li><a>三号子菜单</a></li>

                <li><a>四号子菜单</a></li>

                <li class="Lst"><a>五号子菜单</a></li>

            </ul>

        </div>

    </div>

    <div class="tree_2" id="tree_id__1">

        <div class="tree_tit"><h3><a href="javascript:showmenu_tree(1);">二号主菜单</a></h3></div>

        <div class="tree_txt">

            <ul>

                <li><a>一号子菜单</a></li>

                <li><a>二号子菜单</a></li>

                <li><a>三号子菜单</a></li>

                <li><a>四号子菜单</a></li>

                <li class="Lst"><a>五号子菜单</a></li>

            </ul>

        </div>

    </div>

    <div class="tree_2" id="tree_id__2">

        <div class="tree_tit"><h3><a href="javascript:showmenu_tree(2);">三号主菜单</a></h3></div>

        <div class="tree_txt">

            <ul>

                <li><a>一号子菜单</a></li>

                <li><a>二号子菜单</a></li>

                <li><a>三号子菜单</a></li>

                <li><a>四号子菜单</a></li>

                <li class="Lst"><a>五号子菜单</a></li>

            </ul>

        </div>

    </div>

    <div class="tree_2" id="tree_id__3">

    <div class="tree_tit"><h3><a href="javascript:showmenu_tree(3);">四号主菜单</a></h3></div>

    <div class="tree_txt">

         <ul>

            <li><a>一号子菜单</a></li>

            <li><a>二号子菜单</a></li>

            <li><a>三号子菜单</a></li>

            <li><a>四号子菜单</a></li>

            <li class="Lst"><a>五号子菜单</a></li>

         </ul>

    </div>

    </div>

</div>

</body>

</html>

虽说是css + div,但起作用的肯定是javaScript吧，

然后我震惊的发现起作用的就一行代码

Obj.className=Obj.className==NameA?NameB:NameA;

选哪一个就把哪一个div的css换掉。

div+css树形菜单的更多相关文章

HTML5 div+css导航菜单
HTML5 div+css导航菜单视频音乐小说故事作品阅读联系
[div+css]竖排菜单
} #box{ width:120px; font-size: 12px; font- ...
十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
CSS之简单树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
下拉的DIV+CSS+JS二级树型菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
DIV+CSS布局重新学习之css控制ul li实现2级菜单
竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html> <head> <meta charset="utf-8"> ...
jQuery 树形菜单
树形菜单在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

随机推荐

sql helper
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...
wordpress教程之自带缩略图功能
首页你要看下你所用的主题有没有开启文章缩略图功能,如果看起的话,会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图: 如果没有说明你还没有激活这功能.我们需要在你 ...
BZOJ 1065 奥运物流
http://www.lydsy.com/JudgeOnline/problem.php?id=1065 思路:由于n个点,有n条边,因此由根就会引出一个环,我们枚举环的长度,在那个长度断开,我们假设 ...
USB Mass Storage学习笔记－STM32＋FLASH实现U盘
一.内容概述采用STM32内部自带USB控制器外加大页NAND FLASH K9F1G08U0A实现一个128M的U盘. 1.STM32的USB控制器 STM32F103的MCU自带USB从控制器 ...
javaWeb Cache技术――OSCache（转-全）
什么是osCache? 它是:http://baike.baidu.com/view/1835163.htm?fr=aladdin OSCache使用指南一.下载安装 OSCache是一个基于web ...
年度钜献，108个大数据文档PDF开放下载
1.大数据的开放式创新——吴甘沙相关阅读:[PPT]吴甘沙:让不同领域的数据真正流动.融合起来,才能释放大数据的价值下载:大数据的开放式创新——吴甘沙.pdf 2.微软严治庆——让大数据为每个人服 ...
Python 自动化脚本学习（二）
流程控制布尔值 temp = True temp = False 比较符号 == != < <= > >= 与或非 and or not 混合布尔的比较 (4<5)an ...
心急的C小加（两种解法）
心急的C小加时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 C小加有一些木棒,它们的长度和质量都已经知道,需要一个机器处理这些木棒,机器开启的时候需要耗费一个单位的 ...
IOS Custom NavigationItem --写titleView
//先自己写一个titleView UIView *titleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 20)];//all ...
ORM框架Hibernate (一) 对DAO封装和抽象
说明前面已经给大家介绍了Struts这个框架,Struts是对Web项目的表示层进行了封装,而Hibernate是对Web项目中DAO层进行封装,也即是.NET中我们常用到的D层封装,即对访问数据库 ...

div+css树形菜单

div+css树形菜单的更多相关文章

随机推荐

热门专题