二级树形菜单

jsntghf

浏览: 2542453 次
性别:
来自: 苏州

最近访客更多访客>>

samhunglv

loginboot

yongjiucui

diabloaaa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

html 菜单

<!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" lang="utf-8">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>二级菜单</title>
        <style type="text/css">
            *{margin:0;padding:0;}
            body{background:gray;text-align:center;}
            #webtree{
                width:200px;margin:0 auto;background:white;text-align:left;font: 12px/1.6em "Microsoft YaHei","微软雅黑","宋体",Verdana,arial,helvetica,sans-serif;padding-left:10px;
            }
            #webtree a:link,.webtree a:visited{
                color:#336699;text-decoration:none;
            }
            #webtree a:hover,.webtree a:active{
                color:#ff6600;text-decoration:underline;
            }
            #webtree dl dt{
                color:gray;font-weight:bold;text-indent:20px;background:url(m.gif) no-repeat 0 1px;height:22px;line-height:22px;cursor: pointer;
            }
            #webtree ul{
                padding-left:20px;list-style:none;
            }
            #webtree li{
                text-indent:20px;background:url(n.gif) no-repeat 0 1px;width:160px;overflow: hidden; text-overflow:ellipsis;
            }
            #webtree span{
                padding:1px;
            }
        </style>
    </head>
    <body>
        <div id="webtree">
            <dl>
                <dt><span>A</span></dt>
                <dd>
                    <ul>
                        <li><a href="">a1</a></li>
                        <li><a href="">a2</a></li>
                        <li><a href="">a3</a></li>
                        <li><a href="">a4</a></li>
                    </ul>
                </dd>
                <dt><span>B</span></dt>
                <dd>
                    <ul>
                        <li><a href="">b1</a></li>
                        <li><a href="">b2</a></li>
                        <li><a href="">b3</a></li>
                    </ul>
                </dd>
                <dt><span>C</span></dt>
                <dd>
                    <ul>
                        <li><a href="">c1</a></li>
                        <li><a href="">c2</a></li>
                        <li><a href="">c3</a></li>
                        <li><a href="">c4</a></li>
                        <li><a href="">c5</a></li>
                    </ul>
                </dd>
                <dt><span>D</span></dt>
                <dd>
                    <ul>
                        <li><a href="">d1</a></li>
                        <li><a href="">d2</a></li>
                        <li><a href="">d3</a></li>
                        <li><a href="">d4</a></li>
                        <li><a href="">d5</a></li>
                        <li><a href="">d6</a></li>
                    </ul>
                </dd>
                <dt><span>E</span></dt>
                <dd>
                    <ul>
                        <li><a href="">e1</a></li>
                        <li><a href="">e2</a></li>
                        <li><a href="">e3</a></li>
                        <li><a href="">e4</a></li>
                        <li><a href="">e5</a></li>
                        <li><a href="">e6</a></li>
                    </ul>
                </dd>
            </dl>
        </div>
        <script type="text/javascript">
            var a = new Array;
            var treeObj=document.getElementById("webtree").getElementsByTagName("dt");
            for(var i=0;i<treeObj.length;i++){
                treeObj[i].setAttribute('onclick','showObj(' + i + ');');
                treeObj[i].id=i;
                document.getElementById("webtree").getElementsByTagName("dd")[i].style.display="none";
            }
            for(var i=0;i<treeObj.length;i++){
                treeObj[i].onclick=function(){
                    showObj(this.id);
                }
            }
            function showObj(objId){
                var obj=document.getElementById("webtree").getElementsByTagName("dd")[objId];
                if(obj.style.display=="none"){
                    obj.style.display="";
                    document.getElementById("webtree").getElementsByTagName("dt")[objId].style.background="url(minus.gif) no-repeat 0 1px";
                    setSelectedClass(objId);
                }else{
                    obj.style.display="none";
                    document.getElementById("webtree").getElementsByTagName("dt")[objId].style.background="url(m.gif) no-repeat 0 1px";
                }
            }
            function setSelectedClass(objId){
                var obj=document.getElementById("webtree").getElementsByTagName("dt");
                for(var i=0;i<obj.length;i++){
                    var sObj=obj[i].getElementsByTagName("span")[0];
                    if(i==objId){
                        sObj.style.background="#f7f7f7";
                        sObj.style.border="1px solid gray";
                    }else{
                        sObj.style.background="white";
                        sObj.style.border="1px solid white";
                    }
                }
            }
        </script>
    </body>
</html>

效果图：

demo.rar (1.7 KB)
下载次数: 3

分享到：

不规则菜单 | 如何发挥一只镜头的最佳成像

2011-09-13 19:11
浏览 1310
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

二级树形菜单

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

二级树形菜单

评论

发表评论

相关推荐

密码输入延迟屏蔽

日历控件

渐变打分条

滚动新闻

网页配色

圆角文本框的实现

javascript加载xml，在chrome下失败的解决办法

可输入文本的下拉框

二级树形菜单

不规则菜单

随机显示图片

滚动字幕效果

美化select

无图片圆角

设置滚动条的颜色

CSS细线表格

分页效果

FormTools

表单当前行高亮的实现

使用jQuery实现复选框全选和取消全选

最近访客更多访客>>