网上很流行的左侧多级树形菜单

更新时间：2009年07月07日点击数： 375

<!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>
<title>炫浪设计素材-网上很流行的左侧多级树形菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
body {font-size:12px;}
#tree1{width:161px;clear:both;}
#tree1 .linkItem{padding:1px;}
#tree1 .indexmenu{padding-top:5px;padding-bottom:5px;border-left:1px solid #78BFD9;border-bottom:1px solid #78BFD9;margin-right:0px !important;margin-right:-1px;padding-left:9px;}
#tree1 .indexmenu{}
#tree1 .indexmenu a{color:#415695;text-decoration: none; font-weight:bold;}
#tree1 .menu{background-repeat:no-repeat;line-height:22px !important;line-height:28px;font-weight:bold;padding-left:10px;background-image:url(http://d2.xvna.com/sc/scimg/left_line.gif?http://www.xvna.com);background-position:bottom;background-repeat:no-repeat;padding-top:2px !important;padding-bottom:2px !important;padding-top:6px;padding-bottom:6px;}
#tree1 .activedmenu{background-repeat:no-repeat;line-height:28px;font-weight:bold;padding-left:10px;border-bottom:1px solid #A5B7DC;padding-top:0px !important;padding-bottom:0px !important;padding-top:6px;padding-bottom:6px;background-image:url(http://d2.xvna.com/sc/scimg/left_line.gif?http://www.xvna.com);background-position:bottom;}
#tree1 .menu a:link,#tree1 .menu a:visited,#tree1 .activedmenu a:link,#tree1 .activedmenu a:visited{color:#fff;text-decoration: none}
#tree1 .item2{text-align:left;margin-top:7px;margin-bottom:7px;}
#tree1 .selectItem2{padding-top:5px;padding-bottom:5px;border-left:1px solid #78BFD9;border-top:1px solid #78BFD9;border-bottom:1px solid #78BFD9;margin-right:0px !important;margin-right:-1px;margin-top:5px;}
#tree1 .selectItem2 a:link{ color:#FF7300;text-decoration: none}
#tree1 .itembox{margin-left:15px;}
#tree1 div{clear:both;}
#tree1{ font-size:14px;color:#415595; font-weight:bold;}
#tree1 .itembox a {text-decoration:none;color:#fff; font-size:13px; font-weight:normal;}
#tree1 .itembox a:hover{}
</style>
<script language="javascript">
var activeMenu=null;
var activeItem=null;
function AlicnMenu(){
var value = null;
var children = [];
this.bindData = function(data){
value = data;
};
this.draw = function(parentObj){
for(var i=0;i<value.length;i++){
var nodeElement =  window.document.createElement("div");
nodeElement.id = "menu_"+ value[i].id;
nodeElement.className = "menu";
var statelink = window.document.createElement("a");
statelink.id = "statelink_"+value[i].id;
setStatueImg(value[i],statelink,true)
var namelink = window.document.createElement("a");
namelink.id = "menu" + value[i].id;
namelink.className = "linkItem";
if(value[i].children.length!=0){
statelink.href=namelink.href='javascript:menuClick(' + value[i].id + ',1)';
}else{
if(value[i].url&&value[i].url!="#"&&value[i].url!="")namelink.href =value[i].url;
/*在右边显示或者新弹出页面*/
if(value[i].target&&value[i].target=="mainFrame"&&value[i].target!="")namelink.target ="mainFrame";
if(value[i].target&&value[i].target=="_blank"&&value[i].target!="")namelink.target ="_blank";
}
namelink.innerHTML = value[i].name;
nodeElement.appendChild(statelink);
nodeElement.appendChild(namelink);
if(value[i].statusIcon){
var floatImg= window.document.createElement("img");
floatImg.src=value[i].statusIcon;
floatImg.alt='新';
floatImg.align="absmiddle";
nodeElement.appendChild(floatImg);
}
parentObj.appendChild(nodeElement);
if(value[i].children.length!=0){
drawChildren(value[i],parentObj);
}
}
};
this.setActivedItem=function(nodeId){
//document.write(document.all.tree1.innerHTML)
if(document.getElementById("statelink_"+nodeId)!=null){
var namelink = document.getElementById("statelink_"+nodeId);
if(namelink.parentNode.className=="menu"){//当前为menu
namelink.parentNode.className="indexmenu";
return;
}
namelink.parentNode.className="selectItem2";
if(namelink.parentNode.parentNode.className=="itembox"){
var nodeId=namelink.parentNode.parentNode.id.replace("children_","")
setStateImg(nodeId,"collapse")
namelink.parentNode.parentNode.style.display="block";
activeMenu = namelink.parentNode.parentNode;
}
if(namelink.parentNode.parentNode.parentNode.className=="itembox"){
namelink.parentNode.parentNode.parentNode.style.display="block";
var nodeId = namelink.parentNode.parentNode.parentNode.id.replace("children_","")
setStateImg(nodeId,"collapse")
activeMenu = namelink.parentNode.parentNode.parentNode;
getObj("menu_"+nodeId).className="activedmenu";//arrow
}
}
}
}
function getObj(str){
return document.getElementById(str);
}
function drawChildren(value,nodeElement){
var childrenElement = null;
childrenElement =  window.document.createElement("div");
childrenElement.id="children_"+value.id;
childrenElement.className="itembox"
for(var i=0;i < value.children.length;i++){
var childElement =  window.document.createElement("div");
var statelink = window.document.createElement("a");
statelink.id = "statelink_"+value.children[i].id;
childElement.className="item2"
var namelink = window.document.createElement("a");
namelink.id = "namelink_" + value.children[i].id;
if(value.children[i].children.length>0){
statelink.href = namelink.href='javascript:menuClick(' + value.children[i].id + ',2)';
}else{
if(value.children[i].url&&value.children[i].url!="#"&&value.children[i].url!="")namelink.href=value.children[i].url;
/*在右边显示或者新弹出页面*/
if(value.children[i].target&&value.children[i].target=="mainFrame"&&value.children[i].target!="")namelink.target ="mainFrame";
if(value.children[i].target&&value.children[i].target=="_blank"&&value.children[i].target!="")namelink.target ="_blank";
}
setStatueImg(value.children[i],statelink,false)
namelink.innerHTML =  value.children[i].name;
childElement.appendChild(statelink);
childElement.appendChild(namelink);
childrenElement.appendChild(childElement);
if(value.children[i].children.length>0){
drawChildren(value.children[i],childrenElement);
}
/*tip仅供非一级菜单*/
if(document.all&&value.children[i].tips){
tipsDiv= window.document.createElement("div");
tipsDiv.innerHTML="<div><div class='left'>"+value.children[i].tips+"<\/div><div class='right'><img src='http://d2.xvna.com/sc/scimg/close11.gif?http://www.xvna.com' alt='' style='cursor:pointer;' onclick='this.parentNode.parentNode.parentNode.className=\"hidebox\"'/><\/div>";
tipsDiv.className="myaliMenuTips";
childElement.appendChild(tipsDiv);
}
if(document.all&&value.children[i].statusIcon){
var floatImg= window.document.createElement("img");
floatImg.src=value.children[i].statusIcon;
floatImg.alt='新';
floatImg.align="absmiddle";
childElement.appendChild(floatImg);
}
}
childrenElement.style.display = "none";
nodeElement.appendChild(childrenElement);
}
function setStatueImg(value,statelink,flag){//flag代表叶子节点是否出现leaf.gif?http://www.xvna.com
if(value.children.length>0){
statelink.innerHTML="<img src='http://d2.xvna.com/sc/scimg/expand.gif?http://www.xvna.com' border=0 align='absmiddle' style='cursor:hand'>";
return;
}else{
statelink.innerHTML="<img src='http://d2.xvna.com/sc/scimg/leaf.gif?http://www.xvna.com' border=0 align='absmiddle' style='cursor:hand'>";
return;
}
}
function menuClick(nodeId,flag){
if(flag==1){//click menu
if(getObj("children_"+nodeId).style.display=="none"){
getObj("children_"+nodeId).style.display="block";
setStateImg(nodeId,"collapse")
if(activeMenu!=null)
{
activeMenu.style.display="none";
setStateImg((activeMenu.id).replace("children_",""),"expand")
getObj("menu_"+(activeMenu.id).replace("children_","")).className="menu";//arrow
}
getObj("menu_"+nodeId).className="activedmenu";//arrow
activeMenu = getObj("children_"+nodeId);
return;
}else{
getObj("children_"+nodeId).style.display="none";
setStateImg(nodeId,"expand");
getObj("menu_"+nodeId).className="menu";//arrow
activeMenu =null;
return;
}
}
if(flag==2){
if(getObj("children_"+nodeId).style.display=="none"){
getObj("children_"+nodeId).style.display="block";
getObj("statelink_"+nodeId).innerHTML="<img src='http://d2.xvna.com/sc/scimg/collapse.gif?http://www.xvna.com' border=0 align='absmiddle' style='cursor:hand'>";
if(activeItem!=null){
activeItem.style.display="none";
setStateImg((activeItem.id).replace("children_",""),"expand");	
}
activeItem = getObj("children_"+nodeId);
return;
activeItem.className="item";
//activeItem=document.getElementById("namelink_"+nodeId);
//document.getElementById("namelink_"+nodeId).className="selectItem";
}
else{
document.getElementById("children_"+nodeId).style.display="none";
document.getElementById("statelink_"+nodeId).innerHTML="<img src='http://d2.xvna.com/sc/scimg/expand.gif?http://www.xvna.com' border=0 align='absmiddle' style='cursor:hand'>";
activeItem =null;
return;
//activeItem.className="item2";
//activeItem=document.getElementById("namelink_"+nodeId);
//document.getElementById("namelink_"+nodeId).className="selectItem";
}
}
}
function setStateImg(nodeId,state){
//alert(nodeId)
if(document.getElementById("statelink_"+nodeId)){}else return;
var statelink = document.getElementById("statelink_"+nodeId);
if(state=="collapse"){
if(statelink.parentNode.className=="menu")statelink.parentNode.className="activedmenu"
statelink.innerHTML="<img src='http://d2.xvna.com/sc/scimg/collapse.gif?http://www.xvna.com' border=0 align='absmiddle' style='cursor:hand'>";
return;
}
if(state=="expand"){
statelink.innerHTML="<img src='http://d2.xvna.com/sc/scimg/expand.gif?http://www.xvna.com' border=0 align='absmiddle' style='cursor:hand'>";
return;
}
return;
}
</script>
</head>

<body style="width:160px; height:100%; background:url(http://d2.xvna.com/sc/scimg/left_bg.gif?http://www.xvna.com) repeat;">


<script type="text/javascript">
var roots = {menu:[
	{id:"0",name:" 炫浪首页首页", url:"main_farm.html", target:"mainFrame", children:[]},
	{id:"1",name:"用户管理平台",children:
	    [
 	        {id:"1.0",name:"公司信息",url:"#",target:"mainFrame", children:[]},
                {id:"1.1",name:"用户资料",url:"#",target:"mainFrame", children:[
                       {id:"1.1.0",name:"修改联系信息",url:"",target:"mainFrame", children:[]},
                       {id:"1.1.1",name:"设置密码提示",url:"",target:"mainFrame", children:[]},
                       {id:"1.1.2",name:"修改密码",url:"",target:"mainFrame", children:[]}
                ]}
	    ]
	},
	{id:"2",name:"商务管理平台",children:
		[
		{id:"2.0",name:"招标通",url:"/cms/user/zbt/index.jsp",target:"_blank", statusIcon:"http://d2.xvna.com/sc/scimg/new_l.gif?http://www.xvna.com",children:[]},
		{id:"2.1",name:"项目通",url:"/cms/user/xmt/index1.html",target:"_blank", statusIcon:"http://d2.xvna.com/sc/scimg/new_l.gif?http://www.xvna.com",children:[]},
        {id:"2.1",name:"免费信息",url:"",target:"mainFrame", statusIcon:"http://d2.xvna.com/sc/scimg/re.gif?http://www.xvna.com",children:[]},
		{id:"2.1",name:"推荐信息",url:"#",target:"mainFrame", statusIcon:"http://d2.xvna.com/sc/scimg/re.gif?http://www.xvna.com",children:[]},
		{id:"2.2",name:"商机发布",url:"#",target:"mainFrame", statusIcon:"http://d2.xvna.com/sc/scimg/re.gif?http://www.xvna.com",children:[
                       {id:"2.2.0",name:"发布信息",url:"",target:"mainFrame", statusIcon:"http://d2.xvna.com/sc/scimg/new_l.gif?http://www.xvna.com",children:[]},            
                       {id:"2.2.1",name:"发布管理",url:"",target:"mainFrame",children:[]}
                ]},
		
		{id:"2.3",name:"信息订阅",url:"",statusIcon:"http://d2.xvna.com/sc/scimg/re.gif?http://www.xvna.com",target:"mainFrame", children:[
					   {id:"2.3.1",name:"订阅管理",url:"#",target:"mainFrame",children:[]},
					   {id:"2.3.0.1",name:"本网订阅",url:"#",target:"mainFrame", children:[]},
					   {id:"2.3.0.2",name:"邮件订阅",url:"#",target:"mainFrame", children:[]},
					   {id:"2.3.0.3",name:"RSS订阅",url:"#",target:"mainFrame", children:[]}
                ]},
                {id:"2.5",name:"我订阅的信息",url:"",target:"mainFrame", children:[]},
                 {id:"2.5",name:"我收藏的信息",url:"#",target:"mainFrame", children:[]},
                {id:"2.6",name:"我浏览的信息",url:"#",target:"mainFrame", children:[]},
                {id:"2.7",name:"产品申请直通车",url:"#",target:"mainFrame", children:[]},
                {id:"2.8",name:"快速找信息",url:"#",target:"mainFrame",children:[]},
                {id:"2.9",name:"招标助手",url:"",target:"mainFrame", children:[
                       {id:"2.9.0",name:"标书下载",url:"#",target:"mainFrame", children:[]},
                       {id:"2.9.1",name:"标书范本",url:"#",target:"mainFrame", children:[]},
                       {id:"2.9.2",name:"政策法规",url:"#",target:"mainFrame", children:[]}
                ]}
		]},
	{id:"3",name:"企业展示平台",children:
	    [
 	        {id:"3.0",name:"企业简介",url:"#",target:"mainFrame", children:[]},
 	        {id:"3.0",name:"营业执照",url:"#",target:"mainFrame", children:[]},
 	        {id:"3.0",name:"资质荣誉",url:"#",target:"mainFrame", children:[]},
			{id:"3.0",name:"工程案例",url:"#",target:"mainFrame", children:[]},
 	        {id:"3.0",name:"产品或服务",url:"#",target:"mainFrame", children:[]},
 	        {id:"3.0",name:"近期采购",url:"#",target:"mainFrame", children:[]},
 	        {id:"3.0",name:"中标公示",url:"#",target:"mainFrame", children:[]},
 	        {id:"3.0",name:"联系方式",url:"#",target:"mainFrame", children:[]},
 	        {id:"3.0",name:"给我留言",url:"#",target:"mainFrame", children:[]},
	        {id:"3.0",name:"产品或服务索引",url:"#",target:"mainFrame", children:[]}
	    ]
	},
         {id:"4",name:"客服支持平台",children:
	    [
 	        {id:"4.0",name:"帮助中心",url:"/cms/user/help/index.html",target:"_blank", children:[]},
            {id:"4.1",name:"客服支持",url:"/cms/user/about/contact_us.htm",target:"_blank", children:[]},
            {id:"4.2",name:"产品与服务",url:"/cms/user/about/products.htm",target:"_blank", children:[]},
			{id:"4.3",name:"联系我们",url:"/cms/user/about/contact_us.htm",target:"_blank", children:[]}
	    ]
	}
	]};
</script>	
<script type="text/javascript">
function treeInit(){
//菜单控件初始化
  var menu = null;
  var parent1 = document.getElementById("tree1");
  menu=new AlicnMenu();
  menu.bindData(roots.menu);
  menu.draw(parent1);
//设置当前高亮菜单
menuClick(2,1);
menu.setActivedItem("0");
//菜单高度自适应
  if(document.getElementById("leftmenu")&&document.getElementById("content")&&document.getElementById("content").offsetHeight){
	if(document.getElementById("content").offsetHeight > document.getElementById("leftmenu").offsetHeight+150){
		if(document.all){
			document.getElementById("leftmenu").style.height=document.getElementById("content").offsetHeight;
		}else{
			document.getElementById("leftmenu").setAttribute("style","height:"+document.getElementById("content").offsetHeight+"px")
		}
	}
}
}
</script>
<div id="leftmenu">			

<div id="tree1"></div>
<script type="text/javascript">treeInit();</script>

</div>

</div>
</body>
</html>

接收回传

赞助商链接

炫友推荐

炫浪推广