Tip: you can modify some code before running
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Beautiful tree navigation bar</title><script language="javascript">/* ------------------------------------------------ | Webpage special effect network | www.111cn.net | others | all special effects on this site have been beautified and are available. | Respect for the fruits of labor. Be sure to keep this trip! | By qptime 2007.9.2 | versions * // version permission information // 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.tar get = 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.items.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.toLowerCase());var str = ''; if(pItem.type == 'header') str = '<table width="100%" class="header" valign="middle" onmouseover="this.className='headerSelected'" onmouseout="this.className='header'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>'; Elsestr ='<table width="100%" class="item" valign="middle" onmouseover="this.className='itemOver'" onmouseout="this.className='item'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>'; If (pItem. img) {str + = '';} if (pItem. url) {str + ='<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';if (pItem.title) str += ' title="' + pItem.title + '"';if (pItem.target) str += ' target="' + pItem.target + '"';str += ' onmouseover="window.status='' + pItem.label + '';return true;" onmouseout="window.status='';return true;"';str += '>';} Str + = ''+ pItem. label; if (pItem. url) str + =''; str + ='</td></tr></table>'; // Alert (pItem. url); // alert (str); if (pItem. _ hc) {str + ='<table id="ct' + this.obj + itemId + '" width="100%" + ((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 is 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.getElementById('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) { //alert(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></head><body bgcolor="#F7F7F7"><table width="221" border="0" cellspacing="0" cellpadding="0"> <tr> <td><p><a target="_blank" href="http://www.111cn.net/"></p><script type="text/javascript">p = new PhenMenu('p'); //alert("asds");p.add(0,-1,'网页特效','','header','http://www.111cn.net/icon/20070902e.gif');p.add(1,0,'窗口特效','http://www.111cn.net');p.add(2,0,'页面导航','http://www.111cn.net');p.add(3,0,'按忸链接','http://www.111cn.net');p.add(4,0,'文本特效','http://www.111cn.net');p.add(5,-1,'JS教程','','header','http://www.111cn.net/icon/20070902c.gif');p.add(6,5,'最新教程','http://www.111cn.net');p.add(7,5,'教程排行','http://www.111cn.net');p.add(8,5,'实际应用','http://www.111cn.net');p.add(9,5,'基础教程','http://www.111cn.net');p.add(10,-1,'特效论坛','','header','http://www.111cn.net/icon/20070902m.gif');p.add(11,10,'最新贴子','http://www.111cn.net');p.add(12,10,'最热帖子','http://www.111cn.net');p.add(13,10,'最新会员','http://www.111cn.net');p.add(14,10,'论坛公告','http://www.111cn.net');p.add(15,-1,'联系方式','','header','http://www.111cn.net/icon/20070902r.gif');p.add(16,15,'QQ号码','http://www.111cn.net');p.add(17,15,'电话号码','http://www.111cn.net');p.add(18,15,'传真号码','http://www.111cn.net');p.add(19,15,'电子邮箱','http://www.111cn.net'); //alert(p.items.length)document.write(p);//p.toString(); //alert(p.items.length);//delete(p);</script></td> </tr></table></body></html>本代码由网页特效网提供
提示：您可以先修改部分代码再运行
