Explain address
It's not easy to write something, it's just a cup of coffee.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Cup with menu </title> <style type= text/css" > body{margin:0px; font-size:12px;} *{margin:0; padding:0;} . de{Background-image:url (yun_qi_img/nav_bg.gif); #demo1 {list-style:none; height:26px; cursor:pointer; Background-image:url (yun_qi_img/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> </pead> <body> <div class= "de" > <ul id= ' demo1 ' > <li> human race </li> <l i> </li> <li> Undead </li> </ul> </div> <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:/web Kit/.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], CO PY = options[name]; if (target = = copy) continue; if (deep && copy && typeof copy = = "Object" &&!copy.nodetype) {target[name] = arguments.cal Lee (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 (AR GS)) = = 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 = {//Timer Time:null,//Judging is that type of menu horizontal (y) or longitudinal (x) type:null,//A set record of those popup list: [],//delay Disappearing time t:300, Foucsli: [],/ /ul Li's style because the popup is not able to get the style on this page can only be created each time Ppopup is added style: {ul: ' width:140px;margin:0px;padding:0;px; list-style:none;c ursor: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; Each of the LI is labeled each (Ul.getelementsbytagname (' li '), function (I,li) {li.setattribute (' pa_ui_num ', I) in the back to be used for data. }); 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 (); First start and after the submenu set off some cases are not the same way This.ul===ul is the first time to start using 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 (); Using the bubbling principle, you only need to bind an event to the outer element ul if (li.nodeName.toLowerCase () = = = ' Li ') {each (ul.getelementsbytagname (' li '), function ( I,elem) {removeclass (elem, ' Focus '); }); AddClass (Li, ' Focus '); The variable-style Li is added to the This.foucsli//this.foucsli.push (LI); var num=li.getattribute (' Pa_ui_num '), cdoc =popup.document,str = '; All of the following 5 rows are fetch data if (this.ul!=ul&&data[num].menu===undefined) {popup.hide (); Return data = This.ul===ul?data[num]:d ata[num].menu; The following paragraphs are generated Li and 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]; The first time after the generation of UL has been used before the UL if (cul) {cul.innerhtml = str; Why do I want to delete an event? Because one is a popup, but the parameters are different, so just delete and rebind to the new data RemoveListener (Cul, ' mouseover '); RemoveListener (Cul, ' mouseout '); RemoveListener (Cul, ' click '); }else{//Same as to add style the style of this page is not going to go because the popup itself is also equivalent to a page 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 (); Display position and size 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); ///Put the displayed popup in the this.list if you have added 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_menu Ie_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; The reason for not using the previous This.findul (cul| | ") is because the modified state is behind that 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 all (Self.foucsli,function (i,o) {removeclass (O, ' Focus '); }); Ul.popup.hide (); },THIS.T); }, Findul:function (UL) {//This.list in search of UL//p representative whether find n represent index is representative is not all unchecked state 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 ': ' Great Wizard ', ' menu ': [{url: ' http://www.baidu.com "," TXT ":" Dafa Skills "," menu ": [{URL:" http://www.baidu.com "," txt ":" Water Element "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Summoned Object " },{url: "http: www.. baidu.com "," txt ":" Puncture Attack "},{url:" http://www.baidu.com "," txt ":" Very Good Things "}]},{url:" http://www.baidu.com "," TXT ":" Blizzard ", "Menu": [{URL: "http://www.baidu.com", "TXT": "Magic Attack"},{url: "http://www.baidu.com", "TXT": "Area Damage"},{url: "http:// Www.baidu.com "," txt ":" Very Beautiful "}, {url:" http://www.baidu.com "," TXT ":" Can be Interrupted "}]},{url:" http://www.baidu.com "," TXT ":" Glorious Aura "},{url:" http://www.baidu.com "," TXT ":" Instantaneous Move "}]},{url:" http://www.baidu.com "," TXT ":" Hero description "," menu ": [{URL:" http ://www.baidu.com "," TXT ":" Intellectual Hero "},{url:" http://www.baidu.com "," TXT ":" Strong Aura "},{url:" http://www.baidu.com "," TXT ":" Auxiliary "}]}]},{url:" http://www.baidu.com "," TXT ":" King of the Hills "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Hill Skill "," menu ": [{ URL: "http://www.baidu.com", "TXT": "Storm Hammer"},{url: "http://www.baidu.com", "txt": "Cone"},{url: "http://www.baidu.com", " TXT ":" Cone Halo "}, {url:" http://www.baidu.com "," TXT ":" The Gods Descend "}]},{url:" http://www.baidu.com "," TXT ":" Hero description "," menu ": [{URL:] http://www.baidu.com "," TXT ":" Power Hero "},{url:" http://www.baidu.com "," TXT ":" Second Kill ability "},{url:" http://www.baidu.com "," txt ":" Very short.},{url: "http://www.baidu.com", "TXT": "Big Technical Metamorphosis"}]}]},{url: "http://www.baidu.com", "TXT": "Paladin", "menu": [{url: "http:// Www.baidu.com "," TXT ":" Paladin Skills "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Light "},{url:" http://www.baidu.com "," TXT ":" Invincible "}, {url:" http://www.baidu.com "," TXT ":" Halo "},{url:" http://www.baidu.com "," TXT ":" Resurrection "}]},{url:" http:// Www.baidu.com "," TXT ":" Hero description "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Power Hero "}, {url:" http://www.baidu.com "," txt ":" "Auxiliary hero"},{url: "http://www.baidu.com", "TXT": "Personal mammy"}]}]},{url: "http://www.baidu.com", "txt": "Blood Mage", "menu": [{URL: " Http://www.baidu.com "," txt ":" Blood Law Skills "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Flame "},{url:" http://www.baidu.com " , "txt": "Suck Blue"}, {url: "http://www.baidu.com", "TXT": "Nothingness"},{url: "http://www.baidu.com", "TXT": "The Bird Phoenix"}}, {url: "http:// Www.baidu.com "," TXT ":" Hero description "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Intellectual Hero "},{url:" http://www.baidu.com "," txt ":" Auxiliary Hero "},{url:" http://www.baidu.com "," TXT ":" Long Very Handsome "}]}], [{URL:" http://www.baidu.com "," txt ":" Cheap Saint "," menu ": [{URL: "http://www.baidu.com "," TXT ":" The Base holy Skill "," menu ": [{URL:" http://www.baidu.com "," TXT ":" The Blast Step "},{url:" http://www.baidu.com "," txt "": "Shadow"}, {url: "http://www.baidu.com", "TXT": "Fatal hit"},{url: "http://www.baidu.com", "TXT": "Blade Storm"}]},{url: "http:// Www.baidu.com "," TXT ":" Hero description "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Agile Hero "}, {url:" http://www.baidu.com "," txt ":" High Attack hero "},{url:" http://www.baidu.com "," txt ":" Pillage "},{url:" http://www.baidu.com "," TXT ":" Indecent Assault Invincible "},{url:" http:// Www.baidu.com "," txt ":" Very powerful "}]}]},{url:" http://www.baidu.com "," txt ":" Prophet Man "," menu ": [{URL:" http://www.baidu.com "," TXT ":" "Prophet Skills", "menu": [{URL: "http://www.baidu.com", "TXT": "Wolf"},{url: "http://www.baidu.com", "TXT": "Day"},{url: "http:/ /www.baidu.com "," TXT ":" Lightning Chain "}, {url:" http://www.baidu.com "," TXT ":" Earthquake "}]},{url:" http://www.baidu.com "," TXT ":" Hero description "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Intellectual Hero "},{url:" http://www.baidu.com "," TXT ":" Harassment Hero "}]}]},{url:" http:/ /www.baidu.com "," TXT ":" Chief Tauren "," menu ": [{URL:" http://www.baidu.com "," txt ":" Cow head Skill "," menu ": [{URL:] http:// Www.baidu.cOm "," txt ":" Shockwave "}, {url:" http://www.baidu.com "," txt ":" Position "},{url:" http://www.baidu.com "," TXT ":" Durable Halo "},{url:" http ://www.baidu.com ", txt": "Resurrection"}]},{url: "http://www.baidu.com", "TXT": "Hero description", "menu": [{URL: "http://www.baidu.com", " TXT ":" "Power Hero"},{url: "http://www.baidu.com", "TXT": "Magic Powerful"},{url: "http://www.baidu.com", "TXT": "Long Mighty"},{url: "http:// Www.baidu.com "," TXT ":" A Meat Shield "}]}]}, {URL:" http://www.baidu.com "," TXT ":" Small yy "," menu ": [{URL:" http://www.baidu.com "," TXT ": Small y Skill", "menu": [{URL: "http://www.baidu.com", "TXT": "Variable Animal"},{url: "http://www.baidu.com", "TXT": "Treatment Wave"}, {URL: " Http://www.baidu.com "," TXT ":" Small Snake Bonzi "},{url:" http://www.baidu.com "," TXT ":" All Invincible "}]},{url:" http://www.baidu.com "," TXT ":" "Hero description", "menu": [{URL: "http://www.baidu.com", "TXT": "Agile Hero"}, {url: "http://www.baidu.com", "TXT": "Magic Powerful"},{url: " http://www.baidu.com ", txt": "Auxiliary Hero"}]}], [{URL: "http://www.baidu.com", "TXT": "Death Knight", "menu": [{URL: "http:// Www.baidu.com "," TXT ":" Dead Riding Skill "," menu ": [{URL:" http://www.baidu.com ", txt:" defecate one Tuo "},{url:" http://www.baidu.com ", txt:" Evil Aura "}, {URL: "http://www.baidu.com", txt: "Death contract"},{url: "http://www.baidu.com", txt: "Resurrection Undead"}]},{url: "http://www.baidu.com", "TXT": "Hero description", "menu": [{URL: "http://www.baidu.com", txt: "Ride is the Sheep"},{url: "http://www.baidu.com", txt: "Prematurely senile"},{url: " Http://www.baidu.com ", txt:" Frost grief "}, {url:" http://www.baidu.com ", txt:" Ah and Seth "}]}]},{url:" http://www.baidu.com "," txt ":" Lich, "menu": [{URL: "http://www.baidu.com", "TXT": "Lich Skills", "menu": [{URL: "http://www.baidu.com", txt: "Ice"},{url: " http://www.baidu.com ", txt:" Bing Jia "},{url:" http://www.baidu.com ", txt:" Contract "}, {url:" http://www.baidu.com ", txt:" Death wither "}] },{url: "http://www.baidu.com", "TXT": "Hero description", "menu": [{URL: "http://www.baidu.com", txt: "Wear skirt"},{url: "http:// Www.baidu.com ", txt:" All is Bone "},{url:" http://www.baidu.com ", txt:" Not male not female "}]}]},{url:" http://www.baidu.com "," TXT ":" The Dread Lord "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Demon Skill "},{url:" http://www.baidu.com "," TXT ":" The hero explains "}]},{url:" http:// Www.baidu.com "," txt ":" Xiao Qiang Prince "," menu ": [{URL:" http://www.baidu.com "," TXT ":" Prince Skill "},{url:" http://www.baidu.com "," txt ":" Hero Description "}]}] ]; Menu.init ($ (' demo1 '), data1); }; </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
