NO.18 多级菜单 - 00fairy00

代码

<!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-Type" content="text/html; charset=utf-8" />
<title>监测系统</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/top.css" rel="stylesheet" type="text/css" />
<script src="js/menu.js" type="text/javascript"></script>
</head>

<body>
<div class="top">
    <div class="fleft"><img src="images/menuleft.png" /></div>
    <div class="menubox">
        <ul class="menu" id="menu">
            <li><a href="#" class="menulink">文件</a></li>
            <li><a href="#" class="menulink">性能管理</a></li>
            <li><a href="#" class="menulink">拓扑管理</a></li>
            <li><a href="#" class="menulink">故障管理</a></li>
            <li><a href="#" class="menulink">报表管理</a></li>
            <li><a href="#" class="menulink">分级管理</a></li>
            <li><a href="#" class="menulink">配置管理</a></li>
            <li>
                <a href="#" class="menulink">系统管理</a>
                <ul>
                    <li>
                        <a href="#" class="sub">拓扑管理</a>
                         <ul>
                            <li><a href="#">子栏目</a></li>
                            <li><a href="#">子栏目</a></li>
                         </ul>
                    </li>
                    <li>
                        <a href="#" class="sub">IP拓扑</a>
                    </li>
                    <li><a href="#">设备视图</a></li>
                    <li>
                        <a href="#"  class="sub">业务视图</a>
                        <ul>
                            <li><a href="#">IP拓扑</a></li>
                            <li><a href="#">拓扑管理</a></li>
                            <li class="topline">
                                <a href="#" class="sub">设备视图</a>
                                <ul>
                                    <li class="topline"><a href="#">123</a></li>
                                    <li><a href="#">IP拓扑</a></li>
                                    <li><a href="#">设备视图</a></li>
                                    <li><a href="#">业务视图</a></li>
                                    <li><a href="#">自定义视图</a></li>
                                </ul>
                            </li>

                            <li><a href="#">业务视图</a></li>
                            <li><a href="#">自定义视图</a></li>
                        </ul>
                    </li>
                    <li><a href="#">自定义视图</a></li>
                    <li><a href="#">系统信息部资产管理</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="fright"><img src="images/menuright.png" /></div>
</div>
<div class="clear"></div>
<div class="btnbox">
    <ul>
        <li><img src="images/go-previous.png" /> <img src="images/go-next.png" /></li>
        <li><img src="images/arrow_refresh.png"</li>
        <li><img src="images/go-home.png" /></li>
        <li><img src="images/system-search.png" /></li>
        <li class="line"><img src="images/line.png" /></li>
        <li><img src="images/video-display.png" /></li>
        <li><img src="images/Clock.png" /></li>
        <li><img src="images/system-search.png" /></li>
        <li><img src="images/chart_bar.png" /></li>
        <li><img src="images/cog.png" /></li>
        <li class="line"><img src="images/line.png" /></li>
    </ul>
</div>
<script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>
</body>
</html>

代码

// JavaScript Document
var menu = function(){
    var t = 15,
        z = 50,
        s = 6,
        a;

    function dd(n){
        this.n = n;
        this.h = []; // 存取有子菜单的项目
        this.c = []     // 存取子菜单
    }
    dd.prototype = {
        init: function(p,c)
        {
                a = c;
            var w = document.getElementById(p),
                s = w.getElementsByTagName('ul'),
                l = s.length, //二级菜单的个数
                i = 0;

            for(i; i < l; i++)
            {
                var h = s[i].parentNode;
                this.h[i] = h;
                this.c[i] = s[i];

                h.onmouseover = new Function(this.n+'.st('+i+',true)');
                h.onmouseout = new Function(this.n+'.st('+i+')');
            }
        },

        st: function(x,f)
        {
            var c = this.c[x],
                h = this.h[x],
                p = h.getElementsByTagName('a')[0];

                clearInterval(c.t);
                c.style['overflow'] = 'hidden';

            if( f )
            {
                p.className += ' '+a;
                if( !c.mh )
                {
                    c.style.display='block';
                    c.style.height='';
                    c.mh=c.offsetHeight;
                    c.style.height=0;
                }

                if( c.mh == c.offsetHeight )
                {
                    c.style.overflow='visible';
                }else
                {
                    c.style.zIndex = z;
                    z++;
                    c.t = setInterval(function(){sl(c,1)}, t );
                }

            }else
            {
                p.className = p.className.replace(a,'');
                c.t = setInterval(function(){ sl(c,-1)}, t );
            }


        }
    }

    function sl(c,f)
    {
        var h = c.offsetHeight;
        if((h <= 0 && f != 1)||(h >= c.mh && f==1))
        {
            if(f==1){
                c.style.filter='';
                c.style.opacity=1;
                c.style.overflow='visible';
            }
            clearInterval(c.t); return
        }
        var d=(f==1) ? Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
        c.style.opacity = o;
        c.style.filter='alpha(opacity='+(o*100)+')';
        c.style.height = h + (d * f) + 'px';
    }

    return {dd:dd};

}();

代码

@charset "utf-8";
.top {
    background:url(../images/menubg.png) repeat-x;
    height:29px;
    width:100%;
}
.menubox{
    float:left;
    height:29px;
}

/*多级菜单样式*/
ul.menu {
    list-style:none;
}
ul.menu * {
    margin:0; padding:0
}
ul.menu a {
    display:block;
    color:#000;
    text-decoration:none;
    height: 25px;
    line-height: 25px;
}
ul.menu li {
    position:relative;
    float:left;
    margin-right:2px;
}
ul.menu ul {
    position:absolute;
    top:28px;
    left:0;
    background:#E5F8FC;
    display:none;
    opacity:0;
    list-style:none
}
ul.menu ul li {
    position:relative;
    border:1px solid #8CC6DA;
    border-top:none;
    width:130px;
    margin:0
}
ul.menu ul li a {
    display:block;
    padding:3px 7px 5px;
    background-color:#E5F8FC;
    color:#4789AC;
}
ul.menu ul li a:hover {
    background-color:#FAFBFD;
    color:#FE8431;
}
ul.menu ul ul {
    left:130px;
    top:-1px;
}
ul.menu .menulink {
    background:url(../images/noactive.png) no-repeat;
    text-align:center;
    width:80px;
    height:29;
    line-height:29px;
    color:#66CCFD;
    margin-right:10px;
}
ul.menu .menulink:hover, ul.menu .menuhover {
    background:url(../images/active.png) no-repeat;
    color:#FFF;
}
ul.menu .sub {
    background:#fff url(../images/arrow.gif) 100% 3px no-repeat;
    color:#FE8333;
}
ul.menu .topline {
    border-top:1px solid #aaa;
}
/*按钮层*/
.btnbox{
    background:url(../images/btnbg.png) repeat-x;
    height:45px;
    padding-left:10px;
}
.btnbox ul li{
    float:left;
    margin:5px 8px;
    cursor:pointer;
}
.line{
    float:left;
    margin:5px 8px;
}
.subbg{
    background: url(../images/subbg.png) repeat-x;
    width:100%;
    height:28px;
}
.user{
    height:28px;
    line-height:28px;
    color:#4889A7;
    padding-left:10px;
    _padding-top:4px;

}
.user img{
    vertical-align:middle;
    padding-right:8px;
}