未完成 明天继续<!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>Menu</title> <style type="text/css"> /*=============================Demo1 styles=======================================================================*/ #tt{ height:auto;width:144px;border:1px solid #9C9A9C;font-size:12px; }#tt div{ height:25px;width:135px;margin:2px;line-height:25px;vertical-align:middle;padding-left:5px;background-image:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/o_4.png); } #tt div.demo1focus{ background-image:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/o_1.png); color:#FFFFFF; } .demo1container{ width:144px;height:auto;border:1px solid #9C9A9C;position:absolute;background-color:#FFFFFF;z-index:10;font-size:12px; } .demo1container div{ display:block;height:25px;width:135px;line-height:25px;vertical-align:middle;margin:0 auto;margin-top:2px;margin-bottom:2px;padding-left:5px; } .demo1tbg{ color:#000000; background-image:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/o_3.png);/*没选中 无子菜单*/ } .demo1over{ background-image:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/o_2.png); /*选中 无子菜单*/ color:#FFFFFF; } .demo1tbgover{ /*没选中 有子菜单*/ background-image:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/o_4.png); color:#000000; } .demo1focusover{ /*选中 有子菜单*/ color:#FFFFFF; background-image:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/o_1.png); } /*=============================Demo2 styles=======================================================================*/ #ss{ width:430px;height:28px;background-image:url(http://images.cnblogs.com/cnblogs_com/wtcsy/240015/o_112604234_p.gif); font-size:13px;color:#FFFFFF; } .demo2container{ width:140px;height:auto;border:1px solid #9C9A9C;position:absolute;background-color:#FFFFFF;background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923146wVz.gif); background-repeat:repeat-y;padding:2px;z-index:10; } #ss div{ height:28px;width:80px;float:left;line-height:28px;vertical-align:middle;text-align:center; } #ss div.demo2focus{ color:#1f3a87; } .hr{ display:block;overflow:hidden;height:1px;width:110px;background-color:#666666;margin:2px;margin-left:26px; } #ss div img{ vertical-align:text-bottom;border:0px;margin-right:5px;padding-top:6px; } .demo2tbg{ display:block;height:26px;width:99%;color:#1f3a87;font-size:12px;line-height:26px;vertical-align:middle;margin:0 auto; *background-color:#FFFFFF;border:1px solid transparent;*border-color:white;filter:chroma(color=white); } .demo2over{ display:block;height:26px;width:99%;color:#1f3a87;font-size:12px;line-height:26px;vertical-align:middle;margin:0 auto; border:1px solid #ADCFF7;background-color:#EFF3FF; } .demo2tbgover{ display:block;height:26px;width:99%;color:#1f3a87;font-size:12px;line-height:26px;vertical-align:middle;margin:0 auto; *background-color:#FFFFFF;border:1px solid transparent;*border-color:white;filter:chroma(color=white); background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif);background-repeat:no-repeat;background-position: 110px 4px; } .demo2focusover{ display:block;height:26px;width:99%;color:#1f3a87;font-size:12px;line-height:26px;vertical-align:middle;margin:0 auto; border:1px solid #ADCFF7;background-color:#EFF3FF;background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif); background-repeat:no-repeat;background-position: 110px 4px; } .demo2tbg img,.demo2over img,.demo2tbgover img,demo2focusover img{ vertical-align:text-bottom; border:0px; margin-right:10px; padding-top:4px; } </style> </head> <body > <div id='tt'> <div>人族</div> <div>兽族</div> <div>不死族</div> <div>精灵族</div> </div> <br><br><br><br><br><br> <div id='ss'> <div><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif'>人族</div> <div><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321593.p.gif'>兽族</div> <div><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321515.p.gif'>不死族</div> <div><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112320937.p.gif'>精灵族</div> </div> <script language="javascript"> var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([\d.]+)/)?true:false; s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; return s; })(navigator.userAgent.toLowerCase()); Sys.IE6&&document.execCommand("BackgroundImageCache", false, true); function $(Id){ return document.getElementById(Id); }; function $$(p,e){ return p.getElementsByTagName(e); }; function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); }; function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); }; function create(elm,parent,fn){ var element = document.createElement(elm); parent.appendChild(element); if(fn)fn(element); return element; }; function getTarget(e){ return e.srcElement||e.target; }; function getNext(e){ return e.relatedTarget||e.toElement; }; function getpos(o){ var x = 0, y = 0; do{x += o.offsetLeft;y += o.offsetTop;}while((o=o.offsetParent)); return {'x':x,'y':y}; }; var Css = function(e,o){ if(typeof o=="string") { e.style.cssText=o; return; } for(var i in o) e.style[i] = o[i]; }; function CurrentStyle(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); }; var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); }; }; var BindAsEventListener = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); }; }; var Extend = function(destination, source){ for (var property in source) { destination[property] = source[property]; }; }; function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i); } }; var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; function Contains(parent,child){ if(!parent||!child)return false; if(parent == child) return true; return Sys.IE?parent.contains(child):(parent.compareDocumentPosition(child)==20)?true:false; }; function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); }; function addClass(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; }; function removeClass(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } }; //========================================================================================================================== var Menu = new Class({ options :{ skin : "demo1", //样式前缀 换皮肤用的 direction : "Y", idname : "menu" //元素id前缀 避免id重复 }, initialize : function(container,containerlists,data,options){ Extend(this,this.options); Extend(this,options||{}); this.stack = []; this.styles = []; //记录保存了样式的元素 this.idname =this.idname+"0"; var _self = this; for(var i=0,l=containerlists.length;i<l;i++) { if(!data[i].menu)continue; addListener(containerlists[i],'mouseover',BindAsEventListener(this,this.Makemenu,data[i],containerlists[i],1)); addListener(containerlists[i],'mouseout',BindAsEventListener(this,this.Hide,data[i],containerlists[i])); } }, Makemenu : function(e,data,obj,arg){ arg?addClass(obj,this.skin+"focus"):addClass(obj,obj.className.split(" ")[0] ==this.skin+"tbgover"?this.skin+"focusover":this.skin+"over"); this.styles.push(obj); if(!data.menu)return; var container = this.Makebody(data,obj),pos = getpos(obj); this.direction=="X"?Css(container,{left:pos.x+"px",top:pos.y+obj.offsetHeight+"px"}):Css(container,{left:pos.x+obj.offsetWidth+"px",top:pos.y+"px"}); !arg&&Css(container,{left:pos.x+obj.offsetWidth+"px",top:pos.y+"px"}); }, Makebody : function(data,obj){ if(!obj.getAttribute('container')) { var container,Item,l; container = create('div',document.body); container.className = this.skin+"container"; for(var i = 0,l=data.menu.length;i<l;i++) { Item = create("div",container); var img = data.menu[i].ico?"<img src ='"+data.menu[i].ico+"' >":""; Item.innerHTML = img+data.menu[i].txt; Item.className = data.menu[i].menu?this.skin+"tbgover":this.skin+"tbg"; addListener(Item,"mouseover",BindAsEventListener(this,this.Makemenu,data.menu[i],Item)); addListener(Item,"mouseout",BindAsEventListener(this,this.Hide,data.menu[i],Item)); } this.idname = this.idname.replace(/\d+$/g,function($0){return parseInt($0)+1}); container.id = this.idname; obj.setAttribute("container",this.idname); addListener(container,"mouseout",BindAsEventListener(this,this.Hide)); } else { var container = $(obj.getAttribute('container')); container.style.display = "block"; } this.stack.push(container); return container; }, Hide : function(e,data,obj){ Sys.IE?(e.cancelBubble = true):e.stopPropagation(); var o = this.styles[0]; obj&&Contains(obj.parentNode,getNext(e))&&removeClass(obj,obj.className.split(" ")[0] ==this.skin+"tbgover"?this.skin+"focusover":this.skin+"over"); for(var i = this.stack.length-1,j=0;i>=0;i--) Contains(this.stack[i],getNext(e))?(j=i,i=-2):(this.stack[i].style.display = "none"); var l=this.stack.length = i==-1?0:j+1; for(var i = this.styles.length-1;i>=l;i--) { removeClass(this.styles[i],this.styles[i].className.split(" ")[0] ==this.skin+"tbgover"?this.skin+"focusover":this.skin+"over"); this.styles.pop(); } this.styles.length==0&&removeClass(o,this.skin+"focus") } }); //========================================================================================================================== window.onload = function(){ var img=['http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif','http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321593.p.gif','http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321515.p.gif','http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112320937.p.gif'] var data1 = [{txt:0,menu:[{txt:"大法师",menu:[{txt:"召唤水元素",menu:[{txt:"穿刺攻击"},{txt:"很强肉盾"},{txt:"对空对第"}]},{txt:"强大暴风雪"},{txt:"辉煌光环"},{txt:"群体瞬间移动"}]},{txt:"山丘之王",menu:[{txt:"风暴之锤"},{txt:"大铁锤敲地"},{txt:"35%几率锥晕"},{txt:"超级天神下凡"}]},{txt:"圣骑士",menu:[{txt:"水元素"},{txt:"暴风雪"},{txt:"辉煌光环"},{txt:"瞬间移动"}]},{txt:"血法师",menu:[{txt:"水元素"},{txt:"暴风雪"},{txt:"辉煌光环"},{txt:"瞬间移动"}]}]},{txt:1,menu:[{txt:"剑圣"},{txt:"先知"},{txt:"牛头人酋长"},{txt:"小YY"}]},{txt:2,menu:[{txt:"死亡骑士"},{txt:"巫妖"},{txt:"恐惧魔王"},{txt:"小强王子"}]},{txt:3,menu:[{txt:"女祭祀(虎MM)"},{txt:"恶魔猎手"},{txt:"丛林守护者"},{txt:"守望者(SM女王)"}]}]; var data =[{txt:0,menu:[{ico:img[0],txt:"大法师",menu:[{ico:img[1],txt:"召唤水元素",menu:[{ico:img[2],txt:"穿刺攻击"},{ico:img[0],txt:"很强肉盾"},{ico:img[1],txt:"对空对第"}]},{ico:img[2],txt:"强大暴风雪"},{ico:img[0],txt:"辉煌光环"},{ico:img[1],txt:"群体瞬间移动"}]},{ico:img[2],txt:"山丘之王",menu:[{ico:img[0],txt:"风暴之锤"},{ico:img[1],txt:"大铁锤敲地"},{ico:img[2],txt:"35%几率锥晕"},{ico:img[0],txt:"超级天神下凡"}]},{ico:img[1],txt:"圣骑士",menu:[{ico:img[2],txt:"一束大光线"},{ico:img[0],txt:"无敌就是无敌"},{ico:img[1],txt:"专注光环啊"},{ico:img[2],txt:"复活6个单位"}]},{ico:img[0],txt:"血法师",menu:[{ico:img[1],txt:"一个燃烧蛋"},{ico:img[3],txt:"吸蓝啊"},{ico:img[3],txt:"虚无魔法加成"},{ico:img[1],txt:"神鸟凤凰"}]}]},{txt:1,menu:[{ico:img[2],txt:"剑圣"},{ico:img[0],txt:"先知"},{ico:img[3],txt:"牛头人酋长"},{ico:img[2],txt:"小YY"}]},{txt:2,menu:[{ico:img[1],txt:"死亡骑士"},{ico:img[0],txt:"巫妖"},{ico:img[3],txt:"恐惧魔王"},{ico:img[1],txt:"小强王子"}]},{txt:3,menu:[{ico:img[1],txt:"丛林守护者"},{ico:img[0],txt:"女祭祀(虎MM)"},{ico:img[2],txt:"守望者(SM女王)"},{ico:img[1],txt:"恶魔猎手",menu:[{ico:img[0],txt:"燃烧法力"},{ico:img[2],txt:"禁祭火焰羽衣"},{ico:img[1],txt:"一定的几率躲避"},{ico:img[0],txt:"变身强大恶魔",menu:[{ico:img[0],txt:"远程攻击"},{ico:img[3],txt:"多500点血"},{ico:img[0],txt:"变的高大帅气"},{ico:img[0],txt:"混乱攻击模式",menu:[{ico:img[0],txt:"无视对方防御"},{ico:img[0],txt:"无视各种护甲"}]}]}]}]}]; new Menu($('tt'),$$($('tt'),'div'),data1); new Menu($('ss'),$$($('ss'),'div'),data,{direction : "X",skin:"demo2",idname:"moshou"}); } </script> <div id='bb'></div> </body> </html>
