常用JS树型菜单

1.比较实用，一般用做后台管理

.titleStyle {

BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #6b8fc8 ; background-image: url(../admin/images/bg_3.gif)

}

.contentStyle {

FONT-SIZE: 9pt; COLOR: red; BACKGROUND-COLOR: #D6DBF7

}

TD {

FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 16pt

}

A:link {

COLOR: #000000; TEXT-DECORATION: none

}

A:active {

COLOR: #000000; TEXT-DECORATION: none

}

A:visited {

COLOR: #000000; TEXT-DECORATION: none

}

A:hover {

COLOR: #ff0000; TEXT-DECORATION: underline

}

</STYLE>

<!--

var layerTop=15; //菜单顶边距

var layerLeft=20; //菜单左边距

var layerWidth=160; //菜单总宽

var titleHeight=26; //标题栏高度

var contentHeight=460; //内容区高度

var stepNo=10; //移动步数，数值越大移动越慢

var itemNo=0;runtimes=0;

document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #183789;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');

function addItem(itemTitle,itemContent){

itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';"><table width=100% cellspacing="0" cellpadding="0">'+

'<tr><td height='+titleHeight+' onclick=changeItem('+itemNo+') class="titleStyle" align=center>'+itemTitle+'</td></tr>'+

'<tr><td height='+contentHeight+' class="contentStyle" valign="top">'+itemContent+'</td></tr></table></div>';

document.write(itemHTML);

itemNo++;

}

//添加菜单标题和内容，可任意多项，注意格式：

addItem('<b><font color="#ffffff"><font color="#ffffff">管理首页</font> | <a href="logout.asp" target="_top"><font color="#ffffff">退出</font></a></font></b>','<DIV STYLE="PADDING-LEFT:15px">☉ <a href="admin_right.asp?action=modify" target="right">管理我的商品</a> | <a href="admin_right.asp?action=addclass" target="right">添加</a><BR>☉ <a href="admin_right.asp?action=glnews" target="right">管理我的新闻</a> | <a href="admin_right.asp?action=addnews" target="right">添加</a><BR>☉ <a href="admin_right.asp?action=fk" target="right">查看我的留言</a><br>☉ <a href="admin_right.asp?action=mydindan" target="right">管理我的订单</a><br></DIV>');

addItem('<b><font color="#ffffff">信息修改</font></b>','<DIV STYLE="PADDING-LEFT:15px">☉ <a href="admin_right.asp?action=fkfs" target="right">付款方式修改</a><BR>☉ <a href="admin_right.asp?action=ps" target="right">配送说明修改</a><BR>☉ <a href="admin_right.asp?action=gong" target="right">修改我的公告</a><br></DIV>');

addItem('<b><font color="#ffffff">商家设置</font></b>','<DIV STYLE="PADDING-LEFT:15px">☉ <a href="admin_right.asp?action=myziliao" target="right">商家资料修改</a><br>☉ <a href="admin_right.asp?action=pass" target="right">商家密码修改</a><br>☉ <a href="admin_right.asp?action=logo" target="right">修改商家LOGO</a><br>☉ <a href="tjbb.asp" target="right">商品销售统计</a><br></DIV>');

document.write('</span>')

document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight;

toItemIndex=itemNo-1;onItemIndex=itemNo-1;

function changeItem(clickItemIndex){

toItemIndex=clickItemIndex;

if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();

runtimes++;

if(runtimes>=stepNo){

onItemIndex=toItemIndex;

runtimes=0;}

else

setTimeout("changeItem(toItemIndex)",10);

}

function moveUp(){

for(i=onItemIndex+1;i<=toItemIndex;i++)

eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');

}

function moveDown(){

for(i=onItemIndex;i>toItemIndex;i--)

eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');

}

changeItem(0);

//-->

</SCRIPT>

</HEAD></HTML>

2.比较炫的

function CoolMenuControl(){

//-----常规变量---

this.lastScrollX=0;

this.lastScrollY=0;

this.lastScrollW=0;

this.lastScrollH=0;

this.td_X=0;

this.td_Y=0;

this.td_W=0;

this.td_H=0;

this.td=0;

this.mouseon=0;

this.current=null

this.hk_name;

this.hktable_name;

this.menudiv_name;

this.menutable_name;

this.ml=0;

this.menuarray=new Array();

this.speed;

this.href="";

//-----菜单项目---

function menuitem(type,value,url,target){

this.type=type

this.value=value

this.url=url

this.target=target

}

//-----插入菜单---

this.insertmenu=function(type,value,url,target){

this.menuarray[this.menuarray.length]=new menuitem(type,value,url,target)

}

//-----程序初试化---

this.init=function(name,bdc,bgc,speed,Alpha){

var inhtml=""

var cellcount=0

var lastcellcount=0

this.hk_name=name+"hk"

this.hktable_name=name+"hktable"

this.menudiv_name=name+"menudiv"

this.menutable_name=name+"menutable"

this.speed=speed

for (i=0;i<this.menuarray.length;i++)

{

if (this.menuarray[i].type=="2") cellcount=cellcount+1

if (this.menuarray[i].type=="1" || this.menuarray[i].type=="0") {cellcount=0}

if (lastcellcount<cellcount) {lastcellcount++}

}

//alert(cellcount)

stylecode="cursor:hand;filter:Alpha(style=0,opacity="+Alpha+");background-color:"+bgc

suspendcode="<DIV id="+this.hk_name+" style='POSITION:absolute;' onclick='"+name+".doClick()'>"

+"<table id="+this.hktable_name+" border='1' width='0' cellspacing='0' style='border-collapse: collapse' bordercolor='"+bdc+"'>"

+"<tr><td height='18' style='"+stylecode+"'></td></tr></table></div>";

document.write(suspendcode);

var fcell=true

for (i=0;i<this.menuarray.length;i++)

{

switch(this.menuarray[i].type)

{

case "0":

t=cellcount*2

if (t<=0)

{

inhtml+='<tr><td colspan=2 class=ht onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value

}

else

{

inhtml+='<tr><td colspan='+t+' class=ht onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value

}

fcell=true

break;

case "1":

t=(cellcount-1)*2

if (t<=0)

{

inhtml+='<tr><td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value

}

else

{

inhtml+='<tr><td width=6><td colspan='+t+' onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value

}

fcell=true

break;

case "2":

if (fcell)

{

inhtml+='<tr><td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value;

fcell=false

}

else

{

inhtml+='<td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value;

}

break;

}

inhtml='<div id='+this.menudiv_name+' onmousemove="'+name+'.doOver()">'

+'<table id='+this.menutable_name+' border="0" cellpadding="2" class="menu" cellspacing="4">'

+inhtml

+'</table></div>';

//alert(inhtml)

document.write(inhtml);

this.lastScrollX=0;

this.lastScrollY=-4;

this.posXY(eval(this.menutable_name).cells[0])

this.td_W=eval(this.menutable_name).cells[0].scrollWidth+6

this.td_H=eval(this.menutable_name).cells[0].scrollHeight

setInterval(name+".scrollback()",1)

}

//-----单击超连接---

this.doClick=function(){

//alert(this.url)

var url=this.href.split(",")

//alert(url[0])

//alert(url[1])

if (url[0]=="") return

if (url[1]=="_blank")

{window.open(url[0])}

else

{location.href=url[0]}

}

//-----滑动处理---

this.scrollback=function(){

diffX=this.td_X-3

diffY=this.td_Y-5

diffW=this.td_W

diffH=this.td_H

percentX=this.speed*(diffX-this.lastScrollX);

percentY=this.speed*(diffY-this.lastScrollY);

percentW=this.speed*(diffW-this.lastScrollW);

percentH=this.speed*(diffH-this.lastScrollH);

if(percentX>0)percentX=Math.ceil(percentX);

else percentX=Math.floor(percentX);

if(percentY>0)percentY=Math.ceil(percentY);

else percentY=Math.floor(percentY);

if(percentW>0)percentW=Math.ceil(percentW);

else percentW=Math.floor(percentW);

if(percentH>0)percentH=Math.ceil(percentH);

else percentH=Math.floor(percentH);

eval(this.hk_name).style.pixelTop+=percentY;

eval(this.hk_name).style.pixelLeft+=percentX;

eval(this.hktable_name).style.pixelWidth+=percentW;

eval(this.hktable_name).style.pixelHeight+=percentH;

this.lastScrollX=this.lastScrollX+percentX;

this.lastScrollY=this.lastScrollY+percentY;

this.lastScrollW=this.lastScrollW+percentW;

this.lastScrollH=this.lastScrollH+percentH;

}

//-----滑出---

this.doOver=function() {

if (event.srcElement.tagName=="TD") {

if (event.srcElement.innerText.length==0 || event.srcElement.innerText=="|") return

this.posXY(event.srcElement)

this.td_W=event.srcElement.scrollWidth+6

this.td_H=event.srcElement.scrollHeight

}

//-----绝对定位---

this.posXY=function(obj){

hk_left=obj.offsetLeft

hk_top=obj.offsetTop

vParent = obj.offsetParent;

while (vParent.tagName.toUpperCase() != "BODY")

{

hk_left += vParent.offsetLeft;

hk_top += vParent.offsetTop;

vParent = vParent.offsetParent;

}

this.td_X=hk_left

this.td_Y=hk_top

}

//-----关于---

this.about=function(){

alert("OK")

}

</script>

<head>

<style>

.b{color=#000066;cursor:hand}

.menu {

font-family:Arial;

cursor:Default;

font-size:12px;

border:1px #000000 solid;

border-collapse: collapse;

filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#dddddd)

progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3);

}

.ht{

font-weight:bold

}

</style>

<!--

第一步：实体化X-Menu类

用法:

var <实体变量>.new CoolMenuControl()

--->

var CoolMenu1=new CoolMenuControl()

var CoolMenu2=new CoolMenuControl()

var CoolMenu3=new CoolMenuControl()

var about=new Array()

about[1]="关于作者\n\n\"这家伙很懒，什么也没留下！！\"\n不过欢迎大家和我交流Javascript\nQQ:81165227\n"

</script>

</head>

<body>

<!--

第二步：建立菜单项目---

用法:

<实体变量>.insertmenu(类型,Html代码,链接网址,目标)

　类型：０代表菜单标题，１代表树型菜单子项目，２代表横向菜单子项目

　Html代码：显示在菜单上的Html代码

链接网址：不用多说了，网址或Javascript脚本

目标：默认为空，既不在本页打开；"_blank"代表在新的页面打开

　例如:

CoolMenu2.insertmenu("2","<img src=http://www.chengwen.cn/blog/attachments/month_0505/0511190407zd_arrow.gif> 新浪网","http://www.sina.com.cn/","_blank") 　

-->

CoolMenu1.insertmenu("0","欢迎使用X-Menu (菜单演示)<br> <font style='font-weight:lighter;'>Made By PuterJam</font>","","")

CoolMenu1.insertmenu("0"," ","http://www.blueidea.com/","_blank")

CoolMenu2.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 横向菜单","","")

CoolMenu2.insertmenu("2","<img src=http://www.chengwen.cn/blog/attachments/month_0505/0511190407zd_arrow.gif> 新浪网","http://www.sina.com.cn/","_blank")

CoolMenu2.insertmenu("2","<img src=http://www.chengwen.cn/blog/attachments/month_0505/0511190407zd_arrow.gif> 我的雅虎","http://cn.yahoo.com/","_blank")

CoolMenu2.insertmenu("2","<img src=http://www.chengwen.cn/blog/attachments/month_0505/0511190407zd_arrow.gif> 亿唐","http://www.etang.com/","_blank")

CoolMenu2.insertmenu("2","<img src=http://www.chengwen.cn/blog/attachments/month_0505/0511190407zd_arrow.gif> 21世纪","http://www.21cn.com/","_blank")

CoolMenu2.insertmenu("2","<img src=http://www.chengwen.cn/blog/attachments/month_0505/0511190407zd_arrow.gif> 游侠网","http://www.ali213.net/","_blank")

CoolMenu3.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 树形菜单","","")

CoolMenu3.insertmenu("0","<img src=http://www.blueidea.com/img/common/logo.gif> ","http://www.blueidea.com/","_blank")

CoolMenu3.insertmenu("1","关于X-Menu菜单","javascript:alert(about[0])","")

CoolMenu3.insertmenu("1","关于作者","javascript:alert(about[1])","")

CoolMenu3.insertmenu("1","联系我","http://wpa.qq.com/msgrd?V=1&Uin=8116

ngwen&Menu=yes","")

CoolMenu3.insertmenu("1","你的浏览器版本","javascript:alert(navigator.appName)","")

</script>

<!--

第三步：建立菜单---

用法:

<实体变量>.init(实体变量名,边框颜色,背景颜色,滑动速度,背景半透明度)

'实体变量名'必须与<实体变量>相同

如果背景颜色="transparent"既为完全透明

　例如:

CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15) 　

-->

</body>

posted on 2007-07-11 00:08 阳春阅读(275) 评论(0) 收藏举报