Navigation menu encapsulated in JavaScript

javascript| Menu | navigation | package

Just these days the company is not busy, the school has no business, so want to take time to set up a personal homepage, design when you want to do a cool navigation menu on the homepage, so on the internet to find inspiration. There is a website navigation bar to give me a good impression, so the Web page to save to study its JS code, did not think is actually used. NET, the custom control generated by the! The code on the top almost didn't see me through! (If you are interested, you can try Oh, inside n multivariable ~ ~ Khan), OK Big Three O'Clock learned C # (garbage) plus its control can be tried, down to use, feel really good, simple and easy-to-use, but ~ test time almost did not faint! Nnd Trial version of unexpectedly can only again this machine test, other people's PC access not only show the Web page also warned that to register to buy!!!! Eldest brother unexpectedly also want $ (this young master monthly internship subsidy only 1000 ￥ AH), Rage decided to encapsulate one. Reference to the tree-type menu JS source code, took 3 days, and finally the first edition has written ^_^
Because the Imags folder does not come up, so the switch effect of the menu background can not show ^_^ everyone to customize their favorite style ^_^

Run Code Box

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" ><ptml> <pead><title>phenix Panelbar</title><script language= "javascript" >/*-------------------- ------------------------------|| Phenix Panelbar | www.seu.edu.cn | | ---------------------------------------------------|| || I believe one day I can fly like phenix! || || finished:17.11.2004 | | --------------------------------------------------*///item Object//alert ("arrived here"); function Phenitem (id,pid , label,url,type,img,over,img2,over2,title,target) {this.id=id; This.pid=pid; This.label=label; This.url=url; This.title=title; This.target=target; this.img=img; This.over=over; This.img2=img2; This.over2=over2; This.type=type; This._ih = false;//is it the head item? THIS._HC =False Has the child item? This._ls = False;//has Sibling item? This._io = False;//whether the Panelbar is open?};/ /menu objectfunction Phenmenu (objname) {this.config = {Closesamelevel:true};//alert ("asdsdf"); this.obj = ObjName;this . Items = [];this.root = new Phenitem (-1);};/ /add a new item to the Item ArrayPhenMenu.prototype.add = function (Id,pid,label,url,type,img,over,img2,over2,title, Target) {This.items[this.items.length] = new Phenitem (id,pid,label,url,type,img,over,img2,over2,title,target);};/ /outputs the menu to the pagePhenMenu.prototype.toString = function () {//alert ("arrived here"); var str = ' <div>\n '; if (document.getElementById) {str + = This.additem (this.root);} else str = ' Browser not supported. '; str = ' \n</div> '; alert (str);//document.write (str);//alert (THIS.ITEMS[0]._HC); return str;};/ /creates the menu StructurePhenMenu.prototype.addItem = function (pitem) {var str = ';//var n=0;for (var n=0; n<this.i Tems.length; n++) {if (This.items[n].PID = = pitem.id) {var ci = this.items[n];//alert (ci.pid);//alert (ci.id); this.seths (CI);//alert ("Item:" +CI._HC); alert (Ci._ls); str + + this.itemcreate (CI, n); if (Ci._ls) break;} Return str;};/ /creates the node icon, url and textPhenMenu.prototype.itemCreate = function (Pitem, itemId) {//alert (PItem.type.toLowerC ASE ()); var str = '; if (Pitem.type = = ' header ') str = ' <table width= ' 100% ' class= ' header ' valign= ' Middle ' ><tr><td> '; Els Estr = ' <table width= ' 100% ' class= ' item ' valign= ' Middle ' ><tr><td> '; if (pitem.img) {str = '  &nbs P; ';} STR + + '      ' + pitem.label;if (pitem.url) str + = ' </a> '; str = ' </td></tr></table> ';//alert (Pitem.url);//alert (str); if (PITEM._HC) {str = ' <table id= ' ct ' + This.obj + itemId + ' "width=" 100% "style=" Display: ' + ((pitem._io)? ' Block ': ' None '] + '; Filter:blendtrans (duration=3.0); Visibility:hidden "><tr><td>" str + this.additem (pitem); str = ' </td></tr></table > ';//alert (str);//document.write (str); Return str;};/ /Checks Whether a item has child and if it's the last SiblingPhenMenu.prototype.setHS = function (pitem) {var lastid;for (var n=0; n<this.items.length; n++) {if (this.items[n].pid = = pitem.id) PITEM._HC = true;if (this.items[n].pid = = pitem.pid) LastID = this.items[n].id;} if (lastid==pitem.id) Pitem._ls = true;};/ /Toggle Open or CLOSEPHENMENU.PROTOTYPE.O = function (id) {//alert (this.items.length); var ci = this.items[id]; Alert (CI);//this.seths (CI);//alert (THIS.ITEMS[ID]._HC); This.itemstatus (!ci._io, id); ci._io =!ci._io; if (this.config.closeSameLevel) This.closelevel (ci);};/ /Change the status of a item (open or closed) PhenMenu.prototype.itemStatus = function (status, id) {ctable= document.getele Mentbyid (' ct ' + this.obj + ID); if (status) {CTable.filters.item (0). Apply (); cTable.style.display = ' block '; cTable.style.visibility = ""; CTable.filters.item (0). Play ();} ElsecTable.style.display = ' None ';//cdiv.style.display = (status)? ' Block ': ' None ';};/ /Closes all items on the same level as certain itemPhenMenu.prototype.closeLevel = function (pitem) {//aler T (THIS.ITEMS[0]._HC); for (var n=0; n<this.items.length; n++) {//alert (THIS.ITEMS[N]._HC); if ((This.items[n) . PID = = pitem.pid) && (this.items[n].id!= pitem.id) && this.items[n]._hc) {This.itemstatus (false, N); This.items[n]._io = False;this.closeallchildren (This.items[n]);}}; PhenMenu.prototype.closeAllChildren = function (Pitem) {for (var n=0; n<this.items.length; n++) {if (this.items[n). PID = = Pitem.id && this.items[n]._hc) {if (this.items[n]._io) this.ItemStatus (False, n); this.items[n]._io = False;this.closeallchildren (This.items[n]);}}; </script><style>.header {height:25px; Font-family:arial,verdana;background-image:url (images/sidenavcategorybg.gif); Font-size:11px;color: #666666; }.headerselected {height:25px; Font-family:arial,verdana;background-image:url (images/sidenavcategoryselectedbg.gif); font-size:11px; Background-repeat:repeat-x; COLOR: #333333; Cursor:pointer}. Navigation_item {padding-left:20px; font-size:11px; Cursor:pointer; COLOR: #000000; Font-family:arial,verdana; height:20px; Text-decoration:none}.item {padding-left:2px; font-size:11px; Cursor:pointer; COLOR: #000000; Font-family:arial,verdana; height:20px; }.itemover {padding-left:2px; font-size:11px; Cursor:pointer; COLOR: #333333; Font-family:arial,verdana; height:20px; Font-weight:bold; Background-color: #EDEDED}.itemselected {padding-left:20px; font-size:11px; Cursor:pointer; COLOR: #000000; Font-family:arial,verdana; HEIGHT: 20px; Text-decoration:underline;} a.headerselected {padding-right:0px; padding-left:0px; Background-image:none; padding-bottom:0px; padding-top:0px; Height:10px}</style></pead><body><table width= "221" border= "0" cellspacing= "0" cellpadding= "0 "> <tr> <td><p>phenix panelbar</p><script type=" text/javascript ">p = new PhenMenu (' P '); Alert ("ASDs");p. Add (0,-1, ' Label1 Phoenix ', ', ' header ', ' E.gif ');p. Add (1,0, ' label1.1 Phoenix ', ' www.sina.com.cn ');p. Add (2,0 , ' label1.2 ', ' www.sina.com.cn ');p. Add (3,0, ' label1.3 ', ' www.sina.com.cn ');p. Add (4,0, ' label1.4 ', ' www.sina.com.cn ') ;p. Add (5,-1, ' label2 ', ', ' header ', ' C.gif ');p. Add (6,5, ' label2.1 ', ' www.seu.edu.cn ');p. Add (7,5, ' label2.2 ', ') Www.seu.edu.cn ');p. Add (8,5, ' label2.3 ', ' www.seu.edu.cn ');p. Add (9,5, ' label2.4 ', ' www.seu.edu.cn ');p. Add (10,-1, ' Label3 ', ', ' header ', ' M.gif ');p. Add (11,10, ' label3.1 ', ' www.seu.edu.cn ');p. Add (12,10, ' label3.2 ', ' www.seu.edu.cn ') ;p. Add (13,10, ' label3.3 ', ' www.seu.edu.cn ');p. Add (14,10, ' LAbel3.4 ', ' www.seu.edu.cn ');p. Add (15,-1, ' label4 ', ', ' header ', ' R.gif ');p. Add (16,15, ' label4.1 ', ' www.seu.edu.cn '); P.add (17,15, ' label4.2 ', ' www.seu.edu.cn ');p. Add (18,15, ' label4.3 ', ' www.seu.edu.cn ');p. Add (19,15, ' label4.4 ', ' Www.seu.edu.cn '); Alert (p.items.length) document.write (p);//p.tostring (); alert (p.items.length);//delete (p);</script></td> </tr></table></body></ptml >

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

PS: Inside the script code and style can be written in a separate JS and CSS files.