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换掉。

时间: 2024-10-10 07:56:21

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

HTML5 div+css导航菜单

HTML5 div+css导航菜单 视频 音乐 小说 故事 作品 阅读 联系

div+css二级菜单

效果图: CSS代码: *{ margin: 0; padding: 0; text-decoration: none;} .nav { margin: 30px auto; width: 800px; height: 30px; background: #FF5640;} .nav > ul > li { list-style: none; float: left; font-size: 13px; width: 130px; height: 30px; line-height: 30px;

[div+css]竖排菜单

1 <!doctype html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Menu</title> 6     <style> 7          8         body{ 9             background-color: #ffded0;10         

关于采用css样式将多余的文字隐藏,以及实现树形菜单

前不久根据项目需要,需要写个页面,在页面中需要动态的实现一个树形的菜单,经过问度娘,选择使用一个treeTable的js插件.http://zhanchaojiang.com/demo/demo/treeTable.html这是对该插件的介绍地址.在这个插件中有如下几个树形:theme:default或者是vsStyle,默认为default,差别应该在样式上,default是加减号,vsStyle是三角.expandLevel:默认展开的层数,默认值为1.也就是刷新该页面时树状图展开的层次.c

DIV+CSS布局重新学习之css控制ul li实现2级菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

DIV+CSS制作二级横向弹出菜单,略简单

没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯DIV+CSS制作二级横向弹出菜单</title> 6 <style type="text/css"> 7 .menu{ 8 font-family:arial,sa

纯div+css制作的弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

基于div css下拉导航菜单分类代码

基于div css下拉导航菜单分类代码是一款绿色风格的jQuery下拉分类导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="hc_lnav jslist"> <div class="allbtn"> <h2><a href="#"><strong> </strong>全部商品分类<i> </i><

DIV+CSS制作的导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ