跨帧结构无限级菜单

解释地址
写点东西不容易啊真的就这么杯具了杯具啊

<！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>杯具的菜单</title> <style type="text/css"> body{margin:0px; padding:0px; font-size:12px;} *{margin:0; padding:0;} .de{ background-image:url（http://paui.52done.cn/demos/menu/images/nav_bg.gif）;} #demo1{list-style:none; height:26px; cursor:pointer; background-image:url（http://paui.52done.cn/demos/menu/images/nav_bg.gif）; color:#FFFFFF; margin-left:20px;} #demo1 li{float:left; height:25px; line-height:25px; padding:0 15px; margin-top:1px;} #demo1 li.focus{ color:#FE6100; background-color:#fcfcfc;} </style> </head> <body><ul id="demo1"> <li>人族</li> <li>兽族</li> <li>不死族</li> </ul><script type="text/javascript"> （function（window,undefined）{ window.Sys = function （ua）{ var b = { ie: /msie/.test（ua） && ！/opera/.test（ua）, opera: /opera/.test（ua）, safari: /webkit/.test（ua） && ！/chrome/.test（ua）, firefox: /firefox/.test（ua）, chrome: /chrome/.test（ua） },vMark = ""; for （var i in b） { if （b[i]） { vMark = "safari" == i ？ "version" : i; break; } } b.version = vMark && RegExp（"（？:" + vMark + "）[\/: ]（[\d.]+）"）.test（ua） ？ RegExp.$1 : "0"; b.ie6 = b.ie && parseInt（b.version, 10） == 6; b.ie7 = b.ie && parseInt（b.version, 10） == 7; b.ie8 = b.ie && parseInt（b.version, 10） == 8; return b; }（window.navigator.userAgent.toLowerCase（））; window.Sys.ie6&&document.execCommand（"BackgroundImageCache", false, true）; window.$ = function（Id）{ return document.getElementById（Id）; }; window.addListener = function（element,e,fn）{ ！element.events&&（element.events = {}）; element.events[e]&&（element.events[e][addListener.guid++]=fn）||（element.events[e] = {"0":fn}）; element.addEventListener？element.addEventListener（e,fn,false）:element.attachEvent（"on" + e,fn）; }; window.addListener.guid = 1; window.removeListener = function（element,e,fn）{ var handlers = element.events[e],type; if（fn）{ for（type in handlers） if（handlers[type]===fn）{ element.removeEventListener？element.removeEventListener（e,fn,false）:element.detachEvent（"on" + e,fn）; delete handlers[type]; } }else{ for（type in handlers）{ element.removeEventListener？element.removeEventListener（e,handlers[type],false）:element.detachEvent（"on" + e,handlers[type]）; delete handlers[type]; } } }; window.setStyle = function（elems, style, value）{ if（ ！elems.length ） elems = [elems]; if（ typeof style == "string"）{ style = value === undefined？{cssText:style}:（function（o）{ return （o[style] = value,o）; }）（{}）; }; each（elems,function（i,elem,style）{ var value,name,ie=Sys.ie ; for（name in style）{ value = style[name]; if （name === "opacity" && ie） { elem.style.filter = （elem.currentStyle.filter || ""）.replace（ /alpha（[^）]*）/, "" ） + "alpha（opacity=" + value * 100 + "）"; }else if（name === "float"）{ elem.style[ ie ？ "styleFloat" : "cssFloat" ] = value; }else{ name = name.replace（/-（[a-z]）/ig, function（all, letter）{ return letter.toUpperCase（）; }）; elem.style[name] = value; } } },style）; }; var slice = Array.prototype.slice; window.Bind = function（object, fun） { var args = slice.call（arguments）.slice（2）; return function（） { return fun.apply（object, args）; }; }; window.BindAsEventListener = function（object, fun,args） { var args = slice.call（arguments）.slice（2）; return function（event） { return fun.apply（object, [event || window.event].concat（args））; } }; //copy from jQ window.extend = function（）{ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; if （ typeof target === "boolean" ） { deep = target; target = arguments[1] || {}; i = 2; } if （ typeof target ！== "object" && Object.prototype.toString.call（target）！="[object Function]"） target = {}; for（;i<length;i++）{ if （ （options = arguments[ i ]） ！= null ） for（var name in options）{ var src = target[ name ], copy = options[ name ]; if （ target === copy ） continue; if （ deep && copy && typeof copy === "object" && ！copy.nodeType ）{ target[ name ] = arguments.callee（ deep, src || （ copy.length ！= null ？ [ ] : { } ）, copy ）; } else if（copy ！== undefined） target[ name ] = copy; } } return target; }; //copy from jQ window.each = function （ object, callback, args ） { var name, i = 0, length = object.length; if （ args ） { args = Array.prototype.slice.call（arguments）.slice（2）; if （ length === undefined ） { for （ name in object ） if （ callback.apply（ object[ name ],[name,object[ name ]].concat（args） ） === false ） break; } else for （ ; i < length; i++） if （ callback.apply（ object[ i ],[i,object[ i ]].concat（args）） === false ） // break; } else { if （ length === undefined ） { for （ name in object ） if （ callback.call（ object[ name ], name, object[ name ] ） === false ） break; } else for （ var value = object[0]; i < length && callback.call（ value, i, value ） ！== false; value = object[++i] ）{} } return object; }; window.currentStyle = function（element）{ return element.currentStyle || document.defaultView.getComputedStyle（element, null）; }; window.objPos = function（elem）{ var left = 0, top = 0, right = 0, bottom = 0,doc = elem ？ elem.ownerDocument : document; if （ ！elem.getBoundingClientRect || window.Sys.ie8 ） { var n = elem; while （n） { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; }; right = left + elem.offsetWidth; bottom = top + elem.offsetHeight; } else { var rect = elem.getBoundingClientRect（）; left = right = doc.documentElement.scrollLeft || doc.body.scrollLeft; top = bottom = doc.documentElement.scrollLeft || doc.body.scrollLeft; left += rect.left; right += rect.right; top += rect.top; bottom += rect.bottom; } return { "left": left, "top": top, "right": right, "bottom": bottom }; }; window.hasClass = function（element, className）{ return element.className.match（new RegExp（"（\s|^）"+className+"（\s|$）"））; }; window.addClass = function（element, className）{ ！window.hasClass（element, className）&&（element.className += " "+className）; }; window.removeClass = function（element, className）{ window.hasClass（element, className）&&（element.className = element.className.replace（new RegExp（"（\s|^）"+className+"（\s|$）"）," "））; } }）（window）; //---------------------------------------------------------------------------------------------- var menu = { //定时器 time : null, //判断是那种类型的菜单 横的（y）还是纵的（x） type : null, //一个集合 记录那些popup list : [], // 延迟消失的时间 t : 300, foucsLi :[], //ul li的样式 因为popup里面是取不到本页面上样式的 只能每次创建ppopup的是添加样式 style : { ul : "width:140px;margin:0px;padding:0;px; list-style:none;cursor:pointer;font-size:12px; border:1px solid #FFB26e;", li : "height:22px;line-height:22px;padding:0 10px; margin:0px;background-color:#fcfcfc;cursor:pointer;", focus : "background-color:FE6100;color:#ffffff" }, init : function（ul,data）{ this.ul = ul; this.isOver = false; //给每个li做上标识 在后面去数据用的 each（ul.getElementsByTagName（"li"）,function（i,li）{ li.setAttribute（"pa_ui_num",i）; }）; addListener（ul,"mouseover",BindAsEventListener（this,this.openPopup,ul,document,data））; addListener（ul,"mouseout",BindAsEventListener（this,this.hidea,ul））; }, openPopup : function（e,ul,doc,data）{ this.clear（）; //第一出发 和之后的子菜单出发有些情况是不一样的处理方式 this.ul===ul是第一次出发使用 this.ul===ul？（this.isOver=true）:（this.findul（ul）.obj.is=true）; var li = e.srcElement,popup = ul.popup？ul.popup:ul.popup=doc.parentWindow.createPopup（）; //利用冒泡原理 这样只需要给外层元素ul绑定一个事件就行了 if（li.nodeName.toLowerCase（）==="li"）{ each（ul.getElementsByTagName（"li"）,function（i,elem）{ removeClass（elem,"focus"）; }）; addClass（li,"focus"）; //变过样式的li添加到this.foucsLi中 //this.foucsLi.push（li）; var num =li.getAttribute（"pa_ui_num"）,cDoc =popup.document,str = ""; //下面5行都是取数据 if（this.ul！=ul&&data[num].menu===undefined）{ popup.hide（）; return; } data = this.ul===ul？data[num]:data[num].menu; // 下面一段都是生成li和ul each（data,function（i,menu）{ str = str +"<li pa_ui_num="+i+" pa_ui_menuie_url=""+menu.url+"">"+menu.txt+"</li>"; }）; var cul = cDoc.getElementsByTagName（"ul"）[0]; //第一次的时候生成ul 之后就一直用之前的ul if（cul）{ cul.innerHTML = str; //为什么要删除事件了 因为一只都是用的 一个popup 但是参数不同 所以只要删除后重新绑定 来跟新数据 removeListener（cul,"mouseover"）; removeListener（cul,"mouseout"）; removeListener（cul,"click"）; }else{ //一样要添加样式 本页面的样式是去不到的 因为popup本身也相当于一个页面 var style=cDoc.createStyleSheet（）; style.addRule（"ul",this.style.ul）; style.addRule（"ul li",this.style.li）; style.addRule（"ul li.focus",this.style.focus）; cDoc.body.innerHTML = "<ul>"+str+"</ul>"; cul = cDoc.getElementsByTagName（"ul"）[0]; } popup&&popup.hide（）; //显示的位置和大小 if（this.ul===ul）{ var ret = objPos（li）; popup.show（ret.left+1,ret.top+li.offsetHeight,140,data.length*22+2,cDoc.body）; }else{ popup.show（140-2,22*num,140,data.length*22+2,cDoc.body）; } //把显示出来的 popup放到this.list中 如果已经添加了 就不要重复添加了 this.findul（cul）？（this.findul（cul）.obj.is=false）:this.list.push（{ul:cul,is:false}）; addListener（cul,"mouseover",BindAsEventListener（this,this.openPopup,cul,cDoc,data））; addListener（cul,"click",BindAsEventListener（this,this.reUrl））; addListener（cul,"mouseout",BindAsEventListener（this,this.hidea,this.ul,cul））; } }, reUrl : function（e）{ if（e.srcElement.nodeName.toLowerCase（） ==="li"） alert（e.srcElement.getAttribute（"pa_ui_menuie_url"）） }, clear : function（）{ clearTimeout（this.time）; this.time = null; }, hidea : function（e,ul,cul）{ var li = e.srcElement,self=this,callback=this.findul（cul||""）; if（！cul）{ this.isOver = false; this.list.length>0&&this.list[0].is===true？this.foucsLi.push（li）:removeClass（li,"focus"）; }else{ var i=callback.id+1,l=this.list.length,p=false; for（;i<l;i++）{ if（this.list[i].is===true）p=true } callback.obj.is = false; p？this.foucsLi.push（li）:removeClass（li,"focus"）; } if（this.time！= null）return; //之所以不用之前那个 this.findul（cul||""） 是因为修改状态在那个后面 if（this.findul（cul||""）.is||this.isOver===true）return; this.time = setTimeout（function（）{ var p=false each（self.list,function（i,o）{ if（o.is===true）p=true }）; if（p）return each（self.foucsLi,function（i,o）{ removeClass（o,"focus"）; }）; ul.popup.hide（）; },this.t）; }, findul : function（ul）{ //在this.list中寻找ul //p代表是否找到 n代表索引 is代表是不是全部不选中状态 var p = false,n,is=false; each（this.list,function（i,o）{ o.is===true&&（is=true）; if（ul===o.ul）{ p = true; n=i; }; }）; return p？{obj:this.list[n],id:n,is:is}:false; } }; window.onload = function（）{ var data1 = [ [{url:"http://www.baidu.com","txt":"大法师","menu":[{url:"http: //www.baidu.com","txt":"大法技能","menu":[{url:"http: //www.baidu.com","txt":"水元素","menu": [{url:"http://www.baidu.com","txt":"召唤物"},{url:"http: //www.baidu.com","txt":"穿刺攻击"},{url:"http://www.baidu.com","txt":"很好东西"}]},{url:"http://www.baidu.com","txt":"暴风雪","menu": [{url:"http://www.baidu.com","txt":"魔法攻击"},{url:"http: //www.baidu.com","txt":"面积伤害"},{url:"http://www.baidu.com","txt":"很漂亮"}, {url:"http://www.baidu.com","txt":"可被打断"}]},{url:"http: //www.baidu.com","txt":"辉煌光环"},{url:"http://www.baidu.com","txt":"瞬间移动"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http: //www.baidu.com","txt":"智力英雄"},{url:"http://www.baidu.com","txt":"强大光环"},{url:"http://www.baidu.com","txt":"辅助型"}]}]},{url:"http: //www.baidu.com","txt":"山丘之王","menu":[{url:"http: //www.baidu.com","txt":"山丘技能","menu": [{url:"http://www.baidu.com","txt":"风暴之锤"},{url:"http: //www.baidu.com","txt":"锥地"},{url:"http://www.baidu.com","txt":"锥晕"}, {url:"http://www.baidu.com","txt":"天神下凡"}]},{url:"http: //www.baidu.com","txt":"英雄说明","menu":[{url:"http: //www.baidu.com","txt":"力量英雄"},{url:"http://www.baidu.com","txt":"秒杀能力"},{url:"http://www.baidu.com","txt":"个子很矮"},{url:"http: //www.baidu.com","txt":"大技变态"}]}]},{url:"http://www.baidu.com","txt":"圣骑士","menu":[{url:"http://www.baidu.com","txt":"圣骑技能","menu":[{url:"http: //www.baidu.com","txt":"光"},{url:"http://www.baidu.com","txt":"无敌"}, {url:"http://www.baidu.com","txt":"光环"},{url:"http: //www.baidu.com","txt":"复活"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com","txt":"力量英雄"}, {url:"http://www.baidu.com","txt":"辅助英雄"},{url:"http: //www.baidu.com","txt":"人称奶妈"}]}]},{url:"http://www.baidu.com","txt":"血法师","menu":[{url:"http://www.baidu.com","txt":"血法技能","menu":[{url:"http: //www.baidu.com","txt":"火焰"},{url:"http://www.baidu.com","txt":"吸蓝"}, {url:"http://www.baidu.com","txt":"虚无"},{url:"http: //www.baidu.com","txt":"神鸟凤凰"}]}, {url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http: //www.baidu.com","txt":"智力英雄"},{url:"http://www.baidu.com","txt":"辅助英雄"},{url:"http://www.baidu.com","txt":"长的很帅"}]}]}], [{url:"http://www.baidu.com","txt":"贱圣","menu":[{url:"http: //www.baidu.com","txt":"贱圣技能","menu":[{url:"http: //www.baidu.com","txt":"疾风步"},{url:"http://www.baidu.com","txt":"影分身"}, {url:"http://www.baidu.com","txt":"致命一击"},{url:"http: //www.baidu.com","txt":"剑刃风暴"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com","txt":"敏捷英雄"}, {url:"http://www.baidu.com","txt":"高攻英雄"},{url:"http: //www.baidu.com","txt":"杀人越货"},{url:"http://www.baidu.com","txt":"猥亵无敌"},{url:"http://www.baidu.com","txt":"非常强大"}]}]},{url:"http: //www.baidu.com","txt":" 先知男","menu":[{url:"http://www.baidu.com","txt":"先知技能","menu": [{url:"http://www.baidu.com","txt":"狼"},{url:"http: //www.baidu.com","txt":"日"},{url:"http://www.baidu.com","txt":"闪电链"}, {url:"http://www.baidu.com","txt":"地震"}]},{url:"http: //www.baidu.com","txt":"英雄说明","menu":[{url:"http: //www.baidu.com","txt":"智力英雄"},{url:"http://www.baidu.com","txt":"骚扰英雄"}]}]},{url:"http://www.baidu.com","txt":"牛头人酋长","menu":[{url:"http: //www.baidu.com","txt":"牛头技能","menu":[{url:"http: //www.baidu.com","txt":"冲击波"}, {url:"http://www.baidu.com","txt":"阵地"},{url:"http: //www.baidu.com","txt":"耐久光环"},{url:"http://www.baidu.com","txt":"复活"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu": [{url:"http://www.baidu.com","txt":"力量英雄"},{url:"http: //www.baidu.com","txt":"魔法强大"},{url:"http://www.baidu.com","txt":"长的威猛"},{url:"http://www.baidu.com","txt":"一个肉盾"}]}]}, {url:"http://www.baidu.com","txt":"小YY","menu":[{url:"http: //www.baidu.com","txt":"小Y技能","menu":[{url:"http: //www.baidu.com","txt":"变动物"},{url:"http://www.baidu.com","txt":"治疗波"}, {url:"http://www.baidu.com","txt":"小蛇棒子"},{url:"http: //www.baidu.com","txt":"全体无敌"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com","txt":"敏捷英雄"}, {url:"http://www.baidu.com","txt":"魔法强大"},{url:"http: //www.baidu.com","txt":"辅助英雄"}]}]}], [{url:"http://www.baidu.com","txt":"死亡骑士","menu":[{url:"http: //www.baidu.com","txt":"亡骑技能","menu":[{url:"http://www.baidu.com",txt:"大便一拓"},{url:"http://www.baidu.com",txt:"邪恶光环"}, {url:"http://www.baidu.com",txt:"死亡契约"},{url:"http: //www.baidu.com",txt:"复活亡灵"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com",txt:"骑的是羊"},{url:"http: //www.baidu.com",txt:"未老先衰"},{url:"http://www.baidu.com",txt:"冰霜之哀"}, {url:"http://www.baidu.com",txt:"啊而塞思"}]}]},{url:"http: //www.baidu.com","txt":"巫妖","menu":[{url:"http://www.baidu.com","txt":"巫妖技能","menu":[{url:"http://www.baidu.com",txt:"暴冰"},{url:"http: //www.baidu.com",txt:"冰甲"},{url:"http://www.baidu.com",txt:"契约"}, {url:"http://www.baidu.com",txt:"死亡凋零"}]},{url:"http: //www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com",txt:"穿裙子"},{url:"http://www.baidu.com",txt:"全是骨头"},{url:"http: //www.baidu.com",txt:"不男不女"}]}]},{url:"http://www.baidu.com","txt":"恐惧魔王","menu":[{url:"http://www.baidu.com","txt":"魔王技能"},{url:"http: //www.baidu.com","txt":"英雄说明"}]},{url:"http://www.baidu.com","txt":"小强王子","menu": [{url:"http://www.baidu.com","txt":"王子技能"},{url:"http: //www.baidu.com","txt":"英雄说明"}]}] ]; menu.init（$（"demo1"）,data1）; }; </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]