龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

javascript 滑动式折叠菜单实现代码

时间:2012-12-29 08:41来源:未知 作者:admin 点击: 次
分享到：
这是一个转别人的javascript 滑动式折叠菜单实现代码，操作的简便性，因此，深受前台设计师的喜爱。随着大家对动画效果的钟爱，折叠菜单也开始动起来了，本文介绍的就是 DimX 制作的
这是一个转别人的javascript 滑动式折叠菜单实现代码，操作的简便性，因此，深受前台设计师的喜爱。随着大家对动画效果的钟爱，折叠菜单也开始动起来了，本文介绍的就是 DimX 制作的滑动式折叠菜单效果

先看看效果，

这很像后台的操作吧，好了下面我们来看实例方法

js代码如下

 代码如下
<script type="text/javascript">
function SDMenu(id) {
    if (!document.getElementById || !document.getElementsByTagName)
        return false;
    this.menu = document.getElementById(id);
    this.submenus = this.menu.getElementsByTagName("div");
    this.remember = true;
    this.speed = 3;
    this.markCurrent = true;
    this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
    var mainInstance = this;
    for (var i = 0; i < this.submenus.length; i++)
        this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
            mainInstance.toggleMenu(this.parentNode);
        };
    if (this.markCurrent) {
        var links = this.menu.getElementsByTagName("a");
        for (var i = 0; i < links.length; i++)
            if (links[i].href == document.location.href) {
                links[i].className = "current";
                break;
            }
    }
    if (this.remember) {
        var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
        var match = regex.exec(document.cookie);
        if (match) {
            var states = match[1].split("");
            for (var i = 0; i < states.length; i++)
                this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
        }
    }
};
SDMenu.prototype.toggleMenu = function(submenu) {
    if (submenu.className == "collapsed")
        this.expandMenu(submenu);
    else
        this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
    var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    var links = submenu.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++)
        fullHeight += links[i].offsetHeight;
    var moveBy = Math.round(this.speed * links.length);
 
    var mainInstance = this;
    var intId = setInterval(function() {
        var curHeight = submenu.offsetHeight;
        var newHeight = curHeight + moveBy;
        if (newHeight < fullHeight)
            submenu.style.height = newHeight + "px";
        else {
            clearInterval(intId);
            submenu.style.height = "";
            submenu.className = "";
            mainInstance.memorize();
        }
    }, 30);
    this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
    var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
    var mainInstance = this;
    var intId = setInterval(function() {
        var curHeight = submenu.offsetHeight;
        var newHeight = curHeight - moveBy;
        if (newHeight > minHeight)
            submenu.style.height = newHeight + "px";
        else {
            clearInterval(intId);
            submenu.style.height = "";
            submenu.className = "collapsed";
            mainInstance.memorize();
        }
    }, 30);
};
SDMenu.prototype.collapseOthers = function(submenu) {
    if (this.oneSmOnly) {
        for (var i = 0; i < this.submenus.length; i++)
            if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
                this.collapseMenu(this.submenus[i]);
    }
};
SDMenu.prototype.expandAll = function() {
    var oldOneSmOnly = this.oneSmOnly;
    this.oneSmOnly = false;
    for (var i = 0; i < this.submenus.length; i++)
        if (this.submenus[i].className == "collapsed")
            this.expandMenu(this.submenus[i]);
    this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
    for (var i = 0; i < this.submenus.length; i++)
        if (this.submenus[i].className != "collapsed")
            this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
    if (this.remember) {
        var states = new Array();
        for (var i = 0; i < this.submenus.length; i++)
            states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
        var d = new Date();
        d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
        document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
    }
};
</script>

好了，现在来看调用这个折叠菜单方法了

 代码如下

var myMenu = new SDMenu("main_menu"); // 菜单ID www.111cn.net
 
// 默认参数
myMenu.speed = 3;                     // 折叠速度
myMenu.remember = true;               // 是否记录状态
myMenu.oneSmOnly = false;             // 一次只有一个菜单打开
myMenu.markCurrent = true;            // 是否高亮当前菜单
 
myMenu.init();
 
// 附加方法
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);      // 打开一个菜单
myMenu.collapseMenu(firstSubmenu);    // 关闭一个菜单
myMenu.toggleMenu(firstSubmenu);      // 当菜单关闭时打开，当菜单打开时关闭
 
myMenu.expandAll();                   // 打开所有菜单
myMenu.collapseAll();                 // 关闭所有菜单

这么简单哦，哈哈萨克，喜欢的参考一下吧。


精彩图集
node+express+ejs制作简单页面上手指南_node.js
node+express+
js点亮星星评分并获取参数的js代码
js点亮星星评
鼠标滑过出现预览的大图提示效果
鼠标滑过出
查找Oracle高消耗语句的方法
查找Oracle高
PHP开发者必须掌握的6个关键字
PHP开发者必

热门标签

Android修改源码 Java注解 淘宝ip库 精确 脚本全局 全局共享内存 实例方法 CHECKDB 自增长 Python异常处理 pkg-config 字母排 char innodb与myisa xml2array sprintf() Read-only urlencode functio 单态设计模式 安全 aes 加密类 sqlite pickling 文章 时间戳 差异 编程技术 JAVA对象转JSON hotkeys 版图遍历 超大数据 velocity 清除html标签 源代码 注册表 退出程序 图片延迟 LCL.VBS 主机目录 数组转 JSON对象 ajaxSubmit 根分区 双向链表 查询 cin.get 改名 currentStyle John 地址引用 相等符号 memcached学习 调试程序 结束 尾部 locate phpQuery 多表查询 堆排序算法 遍历文件

赞助商链接