树型二级菜单特效

原创 2007年09月25日 15:15:00

<!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=gb2312" />
<title>CMenu3</title>
<style type="text/css">
#CMenu3 {
    width:160px;
    background-color:#F6F6F6;
    padding:1px 10px 10px 10px;
    *padding:11px 10px 10px 10px;
}

#CMenu3 div {
    font-weight:bold;
    font-size:14px;
    height:24px;
    line-height:24px;
    overflow:hidden;
    border:#CCCCCC 1px solid;
    padding-left:10px;
    margin-top:10px;
}

#CMenu3 ul {
    margin:0px;
    padding:0px;
    list-style:none;
    height:0px;
    overflow:hidden;
    background-color:#EBEBEB;
}

#CMenu3 li {
    font-size:12px;
    margin-left:10px;
    line-height:20px;
    height:20px;
    overflow:hidden;
}
</style>
<script type="text/javascript">
var Class = {
//创建类
    create : function () {
        return function () {
            this.initialize.apply(this, arguments);
        };
    }
};

var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var $A = function (a) {
//转换数组
    return a ? Array.apply(null, a) : new Array;
};

Function.prototype.bind = function () {
//绑定事件
    var wc = this, a = $A(arguments), o = a.shift();
    return function () {
        wc.apply(o, a.concat($A(arguments)));
    };
};

Object.extend = function (a, b) {
//追加方法
    for (var i in b) a[i] = b[i];
    return a;
};

Object.extend(Object, {

    addEvent : function (a, b, c, d) {
    //添加函数
        var $ni, $nf;
        if (b.constructor != Array) { $ni = $nf = b; }
        else { $ni = b[0], $nf = b[1]; }
       
        if (a.attachEvent) a.attachEvent($ni, c);
        else a.addEventListener($nf.replace(/^on/, ""), c, d || false);
        return c;
    },
   
    delEvent : function (a, b, c, d) {
    //删除函数
        var $ni, $nf;
        if (b.constructor != Array) { $ni = $nf = b; }
        else { $ni = b[0], $nf = b[1]; }
       
        if (a.detachEvent) a.detachEvent($ni, c);
        else a.removeEventListener($nf.replace(/^on/, ""), c, d || false);
        return c;
    }
   
});

var CMenu3 = Class.create();

CMenu3.prototype = {
   
    initialize : function (object, height, num) {
    //初始化参数
        var wc = this;
        wc.menu = object;
        wc.body = { title : [], content : [] };
        wc.status = { "height" : height, "num" : num, i : 0, ing : false };
        wc.temp = {};
        wc.init();
    },
   
    init : function () {
    //加载
        var wc = this, body = wc.body, nodes = wc.menu.childNodes, i = 0;
       
        for (; i < nodes.length ; i ++) {
            if (nodes[i].nodeType != 1) continue;
           
            if (nodes[i].tagName == "DIV") {
                Object.addEvent(body.title[body.title.length] = nodes[i], "onclick", wc.click.bind(wc, body.title.length - 1));
            } else if (nodes[i].tagName == "UL") (body.content[body.content.length] = nodes[i]).status = {
                num : 1
            };
        }
        if (body.content[0]) with (body.content[0].style) { height = "240px", overflow = "auto"; }
    },
   
    click : function (i) {
    //点击
        var wc = this, title = wc.body.title, content = wc.body.content;
       
        if (i == wc.status.i) return;
        content[i].status.num = 1
        content[wc.status.i].status.num = -1;
       
        if (!wc.temp[i]) wc.temp[i] = true;
        if (!wc.temp[wc.status.i]) wc.temp[wc.status.i] = true;
       
        if (!wc.status.ing) { wc.status.ing = true, wc.effect(); }
        wc.status.i = i;
    },
   
    effect : function () {
    //变化
        var wc = this, n = wc.status.height / wc.status.num, temp = wc.temp, content, status, i;
        //嘿嘿,偷懒这个没控制。。就是说。。。显示的高度和变化次数必须可以整除。。
       
        for (i in temp) {
            content = wc.body.content[i], status = content.status, num = content.offsetHeight + n * status.num;
            if (num <= wc.status.height && num >= 0) {
                content.style.height = num + "px";
            } else {
                content.style.overflow = "auto", delete temp[i];
            }
        }
       
        if (i) window.setTimeout(function () { wc.effect(); }, 10);
        else wc.status.ing = false;
    }
   
}

Object.addEvent(window, "onload", function () {
    var wc = new CMenu3($("CMenu3"), 240, 3);
});

</script>
</head>
<body>
<!--二级菜单 开始-->
<div id="CMenu3">
    <div>大类1</div>
    <ul>
        <li>·&nbsp;1</li>
        <li>·&nbsp;2</li>
        <li>·&nbsp;3</li>
    </ul>
    <div>大类2</div>
    <ul>
        <li>·&nbsp;1</li>
        <li>·&nbsp;2</li>
        <li>·&nbsp;3</li>
        <li>·&nbsp;4</li>
        <li>·&nbsp;5</li>
    </ul>
    <div>大类3</div>
    <ul>
        <li>·&nbsp;1</li>
        <li>·&nbsp;2</li>
        <li>·&nbsp;3</li>
        <li>·&nbsp;4</li>
        <li>·&nbsp;5</li>
        <li>·&nbsp;6</li>
        <li>·&nbsp;7</li>
        <li>·&nbsp;8</li>
        <li>·&nbsp;9</li>
        <li>·&nbsp;0</li>
        <li>·&nbsp;1</li>
        <li>·&nbsp;2</li>
        <li>·&nbsp;3</li>
        <li>·&nbsp;4</li>
        <li>·&nbsp;5</li>
        <li>·&nbsp;6</li>
        <li>·&nbsp;7</li>
        <li>·&nbsp;8</li>
        <li>·&nbsp;9</li>
    </ul>
</div>
<!--二级菜单 结束-->
</body>
</html> 

Jquery特效十二:树形菜单效果

效果图及代码如下:jQuery.subMenu.js:/*******动态下拉菜单*******subMenu v1.0 -- 方便的导航菜单------没剑(2008-1-17)------$Dat...
  • chengly0129
  • chengly0129
  • 2011年02月14日 15:41
  • 4523

横向二级导航菜单(html+css+js)

/*基本信息*/ body { margin: 0; padding: 0; background: #FFFFFF; } /*导航*/ #navigation { f...
  • u011845833
  • u011845833
  • 2014年05月16日 17:22
  • 2377

jq实现二级下拉菜单动画效果

jq实现二级才拉菜单动画效果
  • qq_37950324
  • qq_37950324
  • 2017年04月16日 22:34
  • 819

导航下拉二级菜单特效

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 兼容多种浏...
  • u010433173
  • u010433173
  • 2013年04月29日 08:49
  • 766

div+css 纵向导航菜单及二级菜单弹出

1) 纵向导航菜单 body { font-family: Verdana;font-size: 12px; line-height: 1.5; } a { color: #000;text-...
  • janefir
  • janefir
  • 2013年11月26日 11:58
  • 2702

jquery滑动横向二级菜单特效

jquery鼠标跟随导航效果 - 97站长网 - www.97zzw.com body{ font-size:100%; font-family:"Microsoft YaHei","Arial";...
  • lijunlinlijunlin
  • lijunlinlijunlin
  • 2015年04月23日 02:28
  • 438

导航栏二级下拉菜单的js特效

很多大型的网站的导航菜单栏会有二级菜单,那么刚开始的时候这些二级菜单是隐藏的,我们通过鼠标点击或者把鼠标放在上面就会让二级菜单显示,有些二级菜单会有一些动画效果,我们今天讲的是二级菜单从上面慢慢下滑并...
  • qq_32609883
  • qq_32609883
  • 2015年11月30日 15:20
  • 1352

jQuery中,选中一级菜单,二级菜单自动出现的js代码

其实这个不难。 账号管理 账号注册 ...
  • chaplinlong
  • chaplinlong
  • 2016年04月28日 17:31
  • 1107

关于下拉菜单的onmouseover事件

默认的是当点击上一层菜单的时候才会显示二级菜单,修改为当鼠标放在上一级菜单的时候二级菜单自动弹出。实现方法是将 stemapp/widgets/HeaderCrossMenu/Widget.js文件...
  • qq_15167261
  • qq_15167261
  • 2015年07月11日 13:57
  • 838

js实现 导航栏二级菜单hover下拉效果

var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer funct...
  • Inuyasha1121
  • Inuyasha1121
  • 2015年05月12日 16:41
  • 2477
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:树型二级菜单特效
举报原因:
原因补充:

(最多只允许输入30个字)