js 漂亮的树形导航条代码

作者：简简单单 2013-07-20

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>js 漂亮的树形导航条</title>
<script language="javascript">

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 object
function 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 array
PhenMenu.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 page
PhenMenu.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 structure
PhenMenu.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 text
PhenMenu.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>';

else
		str = '<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 += '  <a href="' + pItem.img + '" class="js-smartPhoto" target="_blank"><img  id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" /></a>';

}
	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 += '</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 is the last sibling
PhenMenu.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 close
PhenMenu.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();
	}
	else
		cTable.style.display = 'none';
	
	//cDiv.style.display = (status) ? 'block': 'none';

};

// Closes all items on the same level as certain item
PhenMenu.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 {
	
	FONT-FAMILY: Arial,Verdana;
	background-image:url(images/sideNavCategoryBg.gif);
	font-size:11px;
	color: #666666;
    
}
.headerSelected {	
	
	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;  TEXT-DECORATION: none
}
.item {
    PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana;  
}
.itemOver {
	PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana;  font-weight:bold; background-color:#EDEDED
}
.itemSelected {
	PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana;  TEXT-DECORATION: underline;
}

A.headerSelected {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; }
</style>
</head>
<body bgcolor="#F7F7F7">
<table width="221" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
	<p><a target="_blank" href="/">
	<img  border="0" src="/images/logo.jpg"></a></p>

p = new PhenMenu('p');
        //alert("asds");
		p.add(0,-1,'网页特效','','header','/icon/20070902e.gif');
		p.add(1,0,'窗口特效','');
		p.add(2,0,'页面导航','');
		p.add(3,0,'按忸链接','');
		p.add(4,0,'文本特效','');
		
		p.add(5,-1,'JS教程','','header','/icon/20070902c.gif');
		p.add(6,5,'最新教程','');
		p.add(7,5,'教程排行','');
		p.add(8,5,'实际应用','');
		p.add(9,5,'基础教程','');
		
		p.add(10,-1,'特效论坛','','header','/icon/20070902m.gif');
		p.add(11,10,'最新贴子','');
		p.add(12,10,'最热帖子','');
		p.add(13,10,'最新会员','');
		p.add(14,10,'论坛公告','');
		
		p.add(15,-1,'联系方式','','header','/icon/20070902r.gif');
		p.add(16,15,'QQ号码','');
		p.add(17,15,'电话号码','');
		p.add(18,15,'传真号码','');
		p.add(19,15,'电子邮箱','');
        //alert(p.items.length)
		document.write(p);
		
		//p.toString();
        //alert(p.items.length);
		//delete(p);
	</script>	</td>
  </tr>
</table>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

js 漂亮的树形导航条代码

相关文章

精彩推荐