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

效果图及代码如下：


jQuery.subMenu.js:

/*******动态下拉菜单*******
subMenu v1.0 -- 方便的导航菜单
------没剑(2008-1-17)------
$Date:2008年1月18日16:07:46
********动态下拉菜单******/
(function($){
$.fn.extend({
        submenu:function(opt,callback){
    if(this==null)return false;
                //参数初始化
    
                if(!opt) var opt={};
                var _this=$(this);
    var _This=_this.get(0);
    var submenu=this;
    /*参数定义*/
    this.oneSmOnly=opt.oneSmOnly!=null?opt.oneSmOnly:false    //单独拉开收起，如果是true的话，当前菜单只有一个展开项，默认为false
     ,this.speed=opt.speed!=null?opt.speed:'300'      //数字越大，速度越慢,默认为300
     ,this.expandNum=opt.expandNum!=null?opt.expandNum:1    //设置初始化时菜单展开的项，默认为第一项
     ,this.savestatus=opt.savestatus!=null?opt.savestatus:true   //设置是否保存菜单展开状态，默认为保存
     ,this.aHeight=25 //菜单项的默认高度
     ,isFirst=true; //是否为第一次加载(没有cookie的情况下)
    _this.addClass("submenu");//增加CSS
    if($.browser.msie && $.browser.version=="6.0"){
     //假如是ie6.0的浏览器,则为第一个菜单加上first-child类,因为ie6下不认first-child
     _this.find("div").eq(0).addClass("first-child");
    }
    if (submenu.savestatus)//如果选择了保存cookie状态，则去读菜单状态
    {
     var menuCookie=null;
     menuCookie=$.cookie("subMenu_" + encodeURIComponent(_This.id)+"_menuStatus");
     if (menuCookie!=null && menuCookie.length>0) {
       var states = menuCookie.split("");
       isFirst=false;
       _this.find("div").each(function(i){
        if (i>states.length)
         return false;
        if (states[i] == "0")
        {
         $(this).addClass("collapsed");
        }
       });
     }
    }else{
     //清空缓存
     $.cookie("subMenu_" + encodeURIComponent(_This.id)+"_menuStatus",null);
    }
    //取得一个A的高度
    _this.find("div > a").eq(0).each(function(){
     submenu.aHeight=this.offsetHeight;
     return false;
    });//取得一个链接的高度
    _this.find("div").each(function(i){ 
     var div=$(this);
     if (isFirst && i!=submenu.expandNum-1)//如果是第一次打开菜单，则显示默认展开的项
     {
      div.addClass("collapsed");
     }
     //绑定事件:标题点击时
     $(div).find("span").eq(0).mouseup(function(e){
      var ParentDiv=$(this).parent();
      if (ParentDiv.attr("class")=="collapsed" || ParentDiv.attr("class")=="first-child collapsed"){//状态为隐藏时
       collapseOthers();//隐藏其它已展开的菜单
       var menuCount=0;//子菜单的数量,这个决定父层要展开多大
       menuCount=ParentDiv.find("a").length;
       ParentDiv.animate({height: ((menuCount * submenu.aHeight)+this.offsetHeight)},submenu.speed); 
       ParentDiv.removeClass("collapsed");
      }else{
       collapseOthers(ParentDiv);
       ParentDiv.animate({height: 25},submenu.speed);
       ParentDiv.addClass("collapsed");
      }
      writeCookie();
     });
    });
    //把除展开的菜单外的其它展开的菜单合上
    collapseOthers = function(me){
     if(submenu.oneSmOnly==false)return;
     _this.find("div").not($(me)).not(".collapsed,first-child collapsed").each(function(){
       $(this).animate({height: 25},submenu.speed);
       $(this).addClass("collapsed");
     })
    };
    //记录菜单状态
    writeCookie = function(){
     //如果要保存cookie的话
     if (submenu.savestatus=="false"){
      //清空缓存
      if($.cookie("subMenu_" + encodeURIComponent(_This.id)+"_menuStatus")!=null)$.cookie("subMenu_" + encodeURIComponent(_This.id)+"_menuStatus",null);
      return;
     }
     var states = new Array();
     _this.find("div").each(function(i){ 
      states.push($(this).attr("class")== "collapsed" ? 0 : 1);
     });
     var d = new Date();
     d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
     $.cookie("subMenu_" + encodeURIComponent(_This.id)+"_menuStatus",states.join(""),{expires: d});
    };
    //展开所有菜单项
    this.expandAll=function(){
     _this.find("div.collapsed").each(function(){
      var menuCount=0;//子菜单的数量,这个决定父层要展开多大
      menuCount=$(this).find("a").length;
      $(this).animate({height: (menuCount*submenu.aHeight)+this.offsetHeight},submenu.speed); 
      $(this).removeClass("collapsed");
     });
    };
    //收起所有菜单项
    this.collapseAll=function(){
     _this.find("div").not(".collapsed").each(function(){
      var menuCount=0;//子菜单的数量,这个决定父层要展开多大
      menuCount=$(this).find("a").length;
      $(this).animate({height: 25},submenu.speed); 
      $(this).addClass("collapsed");
     });
    };
    return this;
        }
})
})(jQuery);

jquery.cookies.js:

jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        var path = options.path ? '; path=' + options.path : '';
        var domain = options.domain ? '; domain=' + options.domain : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

 

main.css:

.lists {
 height:84px;
 margin:0 auto;
 padding:0 0 10px;
 position:relative;
 width:730px;
}
.google-list {
 display:inline;
 float:left;
 height:82px;
 margin:0 145px 0 53px;
 overflow:hidden;
 padding:0;
 position:relative;
 width:600px;
}
.google-list ul {
 margin:0;
 overflow:hidden;
 padding:14px 0 0;
 position:absolute;
}
.google-list li {
 float:left;
 font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
 font-size:10px;
 font-weight:bold;
 line-height:12px;
 list-style:none;
 padding:0 0 30px 17px;
 width:82px;
}
.google-list li a {
 color:#6C93C5;
 float:left;
 text-decoration:none;
}
.google-list li a:hover {
 text-decoration:underline;
}
.google-list li a .imgcont {
 height:43px;
 overflow:hidden;
}
.google-list li a .img {
 display:block;
 margin:0 auto;
 padding:0;
 height:41px;
 width:80px;
 border:1px solid #D9D9D9;
 cursor:pointer;
 background:#FFFFFF none repeat scroll 0 0;
}
.google-list li a span {
 display:block;
 padding:1px 0 0 1px;
 text-align:center;
}
a.button-left {
 background-image:url(c-google-arrows.gif);
 background-position:0 0;
 height:44px;
 left:24px;
 overflow:hidden;
 position:absolute;
 text-indent:-9999px;
 top:18px;
 width:28px;
}
a.button-right {
 background-image:url(c-google-arrows.gif);
 background-position:-28px 0;
 height:44px;
 overflow:hidden;
 position:absolute;
 right:40px;
 text-indent:-9999px;
 top:18px;
 width:28px;
}