求个简单javascript代码谢谢，网站菜单功能

我的小站网菜单列较小，

想利用javascript代码在一个大栏内放置多栏的小内容。

（就是很多网站普遍的那种，鼠标点击一下显示不同内容）

就像17173.com的游戏菜单导航那样的。

谢谢了，我比较菜，有个使用说明一下最好。

第1个回答 2008-12-05

不用说自己菜不菜的，能有这个学习的精神已经很值得鼓励了

呵呵，下面，我来给你介绍几个网站常见的菜单

第一个：仿网易的滑动门导航菜单
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿网易的滑动门技术，用DIV+CSS技术实现</title>
<style type="text/css">

</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">最新新闻</li>
<li onMouseOver="secBoard(1)" class="sec1">最新文章</li>
<li onMouseOver="secBoard(2)" class="sec1">最新日志</li>
<li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li>
</ul>

<ul id="main">
<li class="block">第一个内容</li>
<li class="unblock">第二个内容</li>
<li class="unblock">第三个内容</li>
<li class="unblock">第四个内容</li>
</ul>

</div>
</body>
</html>
这里基本上是使用Css与Div的结合，在整个布局中已层为单位，实行滑动菜单的是一个javascript脚本函数，调用就可以了，看不懂不要紧，日渐积累才是重要

第二个：经典实用的触发型导航（这是鼠标单击事件控制）

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JsCode.CN|---经典实用的触发型导航菜单</title>

</head>

<body>

<STYLE type=text/css>.sec1 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; BORDER-LEFT: #ffffff 1px

solid; CURSOR: hand; COLOR: #000000; BORDER-

BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:

#eeeeee
}
.sec2 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-

LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:

#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
BORDER-RIGHT: gray 1px solid; BORDER-

LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-

BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>

<SCRIPT language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells

[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies

[i].style.display="none";
mainTable.tBodies

[n].style.display="block";
}
</SCRIPT>

<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
<TR align=middle height=20>
<TD class=sec2 onclick=secBoard(0) width="10%">关于TBODY标记</TD>
<TD class=sec1 onclick=secBoard(1) width="10%">关于cells集合</TD>
<TD class=sec1 onclick=secBoard(2) width="10%">关于tBodies集合</TD>
<TD class=sec1 onclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE>
<TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY style="DISPLAY: block">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>指定行做为表体。

<BR>注释：TBODY要素是块要素，并且需要结束标

签。<BR> 即使如果表格没有显式定义TBODY

要素，该要素也提供给所有表。<BR><BR>

参考：《动态HTML参考和开发应用大全》（人民邮电出

版社
Microsoft Corporation著
北京华中兴业科技发展有限公司

译）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>
<TBODY style="DISPLAY:

none">
<TR>
<TD vAlign=top

align=middle><BR><BR>
<TABLE cellSpacing=0

cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>检索表行或者整个

表中所有单元格的集合。<BR>应用于TR、TABLE。

<BR><BR>参考：《动态HTML参考和开发应

用大全》（人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司

译）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>
<TBODY style="DISPLAY:

none">
<TR>
<TD vAlign=top

align=middle><BR><BR>
<TABLE cellSpacing=0

cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>检索表中所有TBODY

对象的集合。对象在该集合中按照HTML源顺序排列。

<BR>应用于TABLE。<BR><BR>参考：

《动态HTML参考和开发应用大全》（人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司

译）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>
<TBODY style="DISPLAY:

none">
<TR>
<TD vAlign=top

align=middle><BR><BR>
<TABLE cellSpacing=0

cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>设置或者检索对象

是否被提供。<BR>可能的值为block、none、

inline、list-item、table-header-group、table-

footer-group。<BR>该特性可读写，块要素默认

值为block，内联要素默认值为inline；层叠样式表

（CSS）属性不可继承。<BR><BR>参考：《

动态HTML参考和开发应用大全》（人民邮电出版社
Microsoft Corporation著

北京华中兴业科技发展有限公司译）

<BR><BR><A

href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true" target=_blank>点击此处
</A>可参阅微软<A href="http://msdn.microsoft.com/" target=_blank>MSDN在线</A>上的解释。

</TD></TR></TBODY></TABLE>

;</TD></TR></TBODY></TABLE&g

t;</body>

</html>

这里跟上面不同的区别在与这是鼠标移动和滑动的事件区别！

第三个：仿拍拍的切换效果菜单（里面的图片是我放上去的，所以会看不到图片的，呵呵继续）
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<title>网页特效|网页特效代码(JsHtml.cn)---仿拍拍paipai.com首页产品图片随机轮显切换效果</title><style>
body {font-size:12px}
img {border:0px}
#sale{right:206px;top:0;width:260px;background:#fff}
#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url("images/saleTitle.gif") no-repeat}
#saleList{margin-top:5px}
#saleList .saleTwo{height:108px;background:url("images/salelineH.gif") bottom repeat-x;}
#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}
#saleList a.saleItem{background:url("images/salelineV.gif") right repeat-y;}
#saleList a img{margin:5px 0}
#saleList a:hover{background-color:#EBFFC5}
</style>
<script type="text/javascript">
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd(){
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
}
function rand(number){
return Math.ceil(rnd()*number)-1;
}
function nextSale(order){
if(order=="up") saleNum--;
else saleNum++;
if(saleNum>2) saleNum=0
else if(saleNum<0) saleNum=2;
//alert(saleNum);
for(i=0;i<3;i++)
document.getElementById("saleList"+i).style.display="none";
document.getElementById("saleList"+saleNum).style.display="";
}
</script>
</head>
<body>
<div id="sale" class="absolute overflow">
<div id="saleTitle" class="absolute">
<a href="javascript:nextSale('up')" title="点击到上一屏">
<img src="images/saleFore.gif" hspace="4" onmouseover="this.src='images/saleForeOver.gif'" onmouseout="this.src='images/saleFore.gif'" /></a><a href="javascript:nextSale('down')" title="点击到下一屏"><img src="images/saleNext.gif" onmouseover="this.src='images/saleNextOver.gif'" onmouseout="this.src='images/saleNext.gif'" /></a></div>
<div class="overflow" style="height:330px" id="saleList">
<script type="text/javascript">var saleNum=rand(3);</script>
<div id="saleList0" style="display:none">
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞浪漫饰品超级大促" src="/jsimages/UploadFiles_3321/200804/20080423085515804.jpg" width="65" height="65" /></div>
<div>
圣诞浪漫饰品<br />
超级大促</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
摄像头集结号<br />
给你新的感觉</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="复古牛仔外套特惠119元起" src="/jsimages/UploadFiles_3321/200804/20080423085516293.jpg" width="65" height="65" /></div>
<div>
复古牛仔外套<br />
特惠119元起</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞拍拍特供运动服3折" src="/jsimages/UploadFiles_3321/200804/20080423085516802.jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
运动服3折</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
摄像头集结号<br />
给你新的感觉</div>
</a></div>
<div>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞拍拍特供电脑周边4折" src="/jsimages/UploadFiles_3321/200804/20080423085516530.jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
电脑周边4折</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="party扮靓甜美腮红" src="/jsimages/UploadFiles_3321/200804/20080423085516658.jpg" width="65" width="65" height="65" /></div>
<div>
party扮靓<br />
甜美腮红</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
</div>
<div id="saleList1" style="display:none">
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="新奇好玩便宜尽在网游频道" src="/jsimages/UploadFiles_3321/200804/20080423085516612.jpg" width="65" height="65" /></div>
<div>
新奇好玩便宜<br />
尽在网游频道</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="展现高贵气质骑士系马靴" src="/jsimages/UploadFiles_3321/200804/20080423085516202.jpg" width="65" height="65" /></div>
<div>
展现高贵气质<br />
骑士系马靴</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
摄像头集结号<br />
给你新的感觉</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="永不过时条纹毛衣" src="/jsimages/UploadFiles_3321/200804/20080423085516984.jpg" width="65" height="65" /></div>
<div>
永不过时<br />
条纹毛衣</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞拍拍特供运动鞋2折" src="/jsimages/UploadFiles_3321/200804/20080423085516651.jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
运动鞋2折</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
<div>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="精简唯美索爱K630" src="/jsimages/UploadFiles_3321/200804/20080423085516302.jpg" width="65" height="65" /></div>
<div>
精简唯美<br />
索爱K630</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="原装瑞士军刀精选" src="/jsimages/UploadFiles_3321/200804/20080423085516549.jpg" width="65" width="65" height="65" /></div>
<div>
原装瑞士军刀<br />
精选</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="超薄机身索爱W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65" /></div>
<div>
超薄机身<br />
索爱W880</div>
</a></div>
</div>
<div id="saleList2" style="display:none">
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="各就各味秋冬饮食计划" src="/jsimages/UploadFiles_3321/200804/20080423085516704.jpg&type=3" width="65" height="65" /></div>
<div>
各就各味<br />
秋冬饮食计划</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞拍拍特供随身视听5折" src="/jsimages/UploadFiles_3321/200804/20080423085516375.jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
随身视听5折</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="超薄机身索爱W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65" /></div>
<div>
超薄机身<br />
索爱W880</div>
</a></div>
<div>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="我爱我家家居大抢购" src="/jsimages/UploadFiles_3321/200804/20080423085516954.jpg" width="65" height="65" /></div>
<div>
我爱我家<br />
家居大抢购</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="超值彩妆套装变身派对女王" src="/jsimages/UploadFiles_3321/200804/20080423085516919.jpg" width="65" width="65" height="65" /></div>
<div>
超值彩妆套装<br />
变身派对女王</div>
</a></div>
</div>
</div>
</div>
<script type="text/javascript">document.getElementById("saleList"+saleNum).style.display="";</script>
<p> </p>
<p>更多网页特效代码尽在 <a href="http://www.jshtml.cn/">网页特效代码</a></p>
</body>
</html>
这个仿拍拍基本上就是2层放图片，但用起来的效果还是可以的，如果不喜欢我还有下面呢，慢慢学，总会看懂的 (最重要的还是Css哦)

这个主要就是让层实现隐藏我觉得这个在层使用方面还是好的

从总体上看，在实现层与层之间的交互，在其代码我觉得你有必要去认真看下！
以上是我介绍额度菜单，虽然不是很强大，但是却很使用，而且在J2EE中
菜单基本上是一个假象，都是用层与Css之间的特效做出来的！
学会了层的具体应用，我相信你也可以有自己特色的菜单的

那我祝你好运咯！！加油！！

第2个回答 2008-12-10

写的比较仓促，基本功能实现了，需要什么样式你自己加，几个关键的地方也给你注释了。
<html>
<head>
<title></title>
</head>
<body>
<table id="tab1" border="1" width="100%">
<tr id="A" align="center">
<td><span style="cursor:pointer" id="AA" onClick="downMenu(this)">AA</span></td>
<td><span style="cursor:pointer" id="BB" onClick="downMenu(this)">BB</span></td>
</tr>
</table>
</body>
</html>
<script>
var arr = new Array;
//把你菜单内容写在这个数组里
arr = [
['AA','摆渡','http://www.baidu.com','新浪','http://www.sina.com.cn'],['BB','163','http://www.163.com','qq','http://www.qq.com']
];
function downMenu(obj){
var tabWidth = 60;//这里可以设置你菜单的宽
if(!document.getElementById("downMenuDiv")){
var emp = getInfo(obj);
var totTop = emp.top;
var menuDiv = document.createElement("div");
menuDiv.setAttribute("id","downMenuDiv");
menuDiv.style.zIndex = "100";
menuDiv.style.position = "absolute";
menuDiv.style.top = totTop + " px";
menuDiv.style.left = event.clientX + window.document.body.scrollLeft - (tabWidth/2) + " px";
var str = menuString(obj.id);

//这里是下拉菜单的table可以加样式
var vMnuCode = "<div style='height:"+obj.offsetHeight+"; width:"+tabWidth+";' onMouseOut=hiddenDownMenu()> </div><TABLE border=2 cellpadding=0 cellspacing=0 width="+tabWidth+" oncontextmenu='return false;' onMouseOut=hiddenDownMenu()><tr><td width=100% class=RightBg><TABLE border=2 cellpadding=0 cellspacing=0 width=100% >" + str + "<\/TABLE><\/td><\/tr><\/TABLE>";
menuDiv.innerHTML = vMnuCode;
document.body.appendChild(menuDiv);
}
}

function menuString(name){
var MenuString = "";
for(var i=0;i<arr.length;i++){
if(arr[i][0]==name){
for(var j=1;j<arr[i].length;j=j+2){
//这里是你菜单的联接
MenuString += "<tr align='center'><td><a href="+arr[i][j+1]+">"+arr[i][j]+"</a><\/td><\/tr>";
}
break;
}
}
return MenuString;
}

function getInfo(o){

var to=new Object();

to.left=to.right=to.top=to.bottom=0;

var twidth=o.offsetWidth;

var theight=o.offsetHeight;

while(o!=document.body){

to.left+=o.offsetLeft;

to.top+=o.offsetTop;

o=o.offsetParent;

}

to.right=to.left+twidth;

to.bottom=to.top+theight;

return to;

}

function hiddenDownMenu(){
var menuDiv = document.getElementById("downMenuDiv");
var mX = event.clientX + document.body.scrollLeft;
var mY = event.clientY + document.body.scrollTop;
if( (mX <= parseInt(menuDiv.style.left)+2) || (mX > parseInt(menuDiv.style.left)+menuDiv.offsetWidth) || (mY < parseInt(menuDiv.style.top)+2) || (mY > parseInt(menuDiv.style.top) + menuDiv.offsetHeight) ){
document.getElementById("downMenuDiv").removeNode(true);
}
}
</script>

第3个回答 2008-12-04

我这里有个例子，你可以参考下：
save_doc.html:
=====================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>OpenCube Visual Design Pad - Save Document</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><div style="color:#000000; font-size:14px; font-family:Arial; font-weight:bold;">Infinite Menus - Saved Menu</div><table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#666666" style="height:1px;"><tr><td></td></tr></table><div style="font-size:12px; color:#000000; font-family:Arial; padding:30px;">This document and menu may be opened and edited using Visual Infinite Menus. Menu settings may be manually edited by modifying this documents source HTML.</div><script language="JavaScript" type="text/javascript">ulm_save_doc=true</script><div style="padding:30px;">



<script language="JavaScript" src="imenus0.js" type="text/javascript"></script>



</div>



<script language="JavaScript" src="ocscript.js" type="text/javascript"></script>

</body></html>

=================================================================#
ocscript.js
==============

function imenus_data0(){

this.menu_showhide_delay = 100
this.show_subs_onclick = false
this.hide_focus_box = true

/*---------------------------------------------
IE Transition Effects
---------------------------------------------*/

this.subs_ie_transition_show = ""

/*[end data]*/}

//[IM Code]

// ---- Add-On [0.7 KB]: Select Tag Fix for IE ----
;function iao_iframefix(){if(ulm_ie&&!ulm_mac&&!ulm_oldie&&!ulm_ie7){for(var i=0;i<(x31=uld.getElementsByTagName("iframe")).length;i++){ if((a=x31[i]).getAttribute("x30")){a.style.height=(x32=a.parentNode.getElementsByTagName("UL")[0]).offsetHeight;a.style.width=x32.offsetWidth;}}}};function iao_ifix_add(b){if(ulm_ie&&!ulm_mac&&!ulm_oldie&&!ulm_ie7&&window.name!="hta"&&window.name!="imopenmenu"){b.parentNode.insertAdjacentHTML("afterBegin","<iframe src='javascript:false;' x30=1 style='z-index:-1;position:absolute;float:left;border-style:none;width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);' frameborder='0'></iframe><div></div>");}}

// ---- IM Code + Security [7.3 KB] ----
im_version="10.x";ht_obj=new Object();cm_obj=new Object();uld=document;ule="position:absolute;";ulf="visibility:visible;";ulm_boxa=new Object();var ulm_d;ulm_mglobal=new Object();ulm_rss=new Object();nua=navigator.userAgent;ulm_ie=window.showHelp;ulm_ie7=nua.indexOf("MSIE 7")+1;ulm_mac=nua.indexOf("Mac")+1;ulm_navigator=nua.indexOf("Netscape")+1;ulm_version=parseFloat(navigator.vendorSub);ulm_oldnav=ulm_navigator&&ulm_version<7.1;ulm_oldie=ulm_ie&&nua.indexOf("MSIE 5.0")+1;ulm_iemac=ulm_ie&&ulm_mac;ulm_opera=nua.indexOf("Opera")+1;ulm_safari=nua.indexOf("afari")+1;x42="_";ulm_curs="cursor:hand;";if(!ulm_ie){x42="z";ulm_curs="cursor:pointer;";}ulmpi=window.imenus_add_pointer_image;var x43;for(mi=0;mi<(x1=uld.getElementsByTagName("UL")).length;mi++){if((x2=x1[mi].id)&&x2.indexOf("imenus")+1){dto=new window["imenus_data"+(x2=x2.substring(6))];ulm_boxa.dto=dto;ulm_boxa["dto"+x2]=dto;ulm_d=dto.menu_showhide_delay;if(ulm_ie&&!ulm_ie7&&!ulm_mac&&(b=window.imenus_efix))b(x2);imenus_create_menu(x1[mi].childNodes,x2+x42,dto,x2,null,1);(ap1=x1[mi].parentNode).id="imouter"+x2;ulm_mglobal["imde"+x2]=ap1;var dt="onmouseover";if(ulm_mglobal.activate_onclick)dt="onclick";document[dt]=function(){var a;if(!ht_obj.doc){clearTimeout(ht_obj.doc);ht_obj.doc=null;}else return;ht_obj.doc=setTimeout("im_hide()",ulm_d);if(a=window.imenus_box_reverse)a();if(a=window.imenus_expandani_hideall)a();if(a=window.imenus_hide_pointer)a();if(a=window.imenus_shift_hide_all)a();};imarc("imde",ap1);if(ulm_oldnav)ap1.parentNode.style.position="static";if(!ulm_oldnav&&ulmpi)ulmpi(x1[mi],dto,0,x2);x6(x2,dto);if((ulm_ie&&!ulm_iemac)&&(b1=window.iao_iframefix))window.attachEvent("onload",b1);if((b1=window.iao_hideshow)&&(ulm_ie&&!ulm_mac))attachEvent("onload",b1);if(b1=window.imenus_box_ani_init)b1(ap1,dto);if(b1=window.imenus_expandani_init)b1(ap1,dto);if(b1=window.imenus_info_addmsg)b1(x2,dto);if(b1=window.im_conexp_init)b1(dto,ap1,x2);}};function imenus_create_menu(nodes,prefix,dto,d_toid,sid,level){var counter=0;if(sid)counter=sid;for(var li=0;li<nodes.length;li++){var a=nodes[li];var c;if(a.tagName=="LI"){a.id="ulitem"+prefix+counter;(this.atag=a.getElementsByTagName("A")[0]).id="ulaitem"+prefix+counter;if(c=this.atag.getAttribute("himg")){ulm_mglobal["timg"+a.id]=new Image();ulm_mglobal["timg"+a.id].src=c;}a.level=level;a.dto=d_toid;a.x4=prefix;a.sid=counter;if((a1=window.imenus_drag_evts)&&level>1)a1(a,dto);if(dto.hide_focus_box)this.atag.onfocus=function(){this.blur()};imenus_se(a,dto);this.isb=false;var b=a.getElementsByTagName("UL")[0];if(b){if(c=window.iao_ifix_add)c(b);var wgc;if(wgc=window.getComputedStyle){if(wgc(b.parentNode,"").getPropertyValue("visibility")=="visible"){cm_obj[a.id]=a;imarc("ishow",a,1);}}else if(ulm_ie&&b.parentNode.currentStyle.visibility=="visible"){cm_obj[a.id]=a;imarc("ishow",a,1);}if((dd=this.atag.firstChild)&&(dd.tagName=="SPAN")&&(dd.className.indexOf("imea")+1)){this.isb=true;if(ulm_mglobal.eimg_fix)imenus_efix_add(level,dd);dd.className=dd.className+"j";dd.firstChild.id="ea"+a.id;dd.setAttribute("imexpandarrow",1);}b.id="x1ub"+prefix+counter;if(!ulm_oldnav&&ulmpi)ulmpi(b.parentNode,dto,level);new imenus_create_menu(b.childNodes,prefix+counter+x42,dto,d_toid,null,level+1);}if((a1=window.imenus_button_add)&&level==1)a1(this.atag,dto);if(this.isb&&ulm_ie&&level==1&&document.getElementById("ssimaw")){if(a1=window.imenus_autowidth)a1(this.atag,counter);}if(!sid&&!ulm_navigator&&!ulm_iemac&&(rssurl=a.getAttribute("rssfeed"))&&(c=window.imenus_get_rss_data))c(a,rssurl);counter++;}}};function imenus_se(a,dto){var d;if(!(d=window.imenus_onclick_events)||!d(a,dto)){a.onmouseover=function(e){var a,b,at;clearTimeout(ht_obj.doc);ht_obj.doc=null;if(((at=this.getElementsByTagName("A")[0]).className.indexOf("iactive")==-1)&&at.className.indexOf("imsubtitle")==-1)imarc("ihover",at,1);if(b=at.getAttribute("himg")){if(!at.getAttribute("zhimg"))at.setAttribute("zhimg",at.style.backgroundImage);at.style.backgroundImage="url("+b+")";}if(b=window.imenus_shift)b(at);if(b=window.imenus_expandani_animateit)b(this);if((ulm_boxa["go"+parseInt(this.id.substring(6))])&&(a=this.getElementsByTagName("UL")[0]))imenus_box_ani(true,a,this,e);else {if(this.className.indexOf("ishow")==-1)ht_obj[this.level]=setTimeout("hover_handle(uld.getElementById('"+this.id+"'))",ulm_d);if(a=window.imenus_box_reverse)a(this);}if(a=window.im_conexp_show)a(this);if(!window.imenus_chover){im_kille(e);return false;}};a.onmouseout=function(e){var a,b;if((a=this.getElementsByTagName("A")[0]).className.indexOf("iactive")==-1){imarc("ihover",a);imarc("iactive",a);}if(this.className.indexOf("ishow")==-1&&(b=a.getAttribute("zhimg")))a.style.backgroundImage=b;clearTimeout(ht_obj[this.level]);if(!window.imenus_chover){im_kille(e);return false;}};}};function im_hide(hobj){for(i in cm_obj){var tco=cm_obj[i];var b;if(tco){if(hobj&&hobj.id.indexOf(tco.id)+1)continue;imarc("ishow",tco);var at=tco.getElementsByTagName("A")[0];imarc("ihover",at);imarc("iactive",at);if(b=at.getAttribute("zhimg"))at.style.backgroundImage=b;cm_obj[i]=null;i++;if(ulm_boxa["go"+parseInt(tco.id.substring(6))])imenus_box_h(tco);var a;if(a=window.imenus_expandani_hideit)a(tco);if(a=window.imenus_shift_hide)a(at);}}};function hover_handle(hobj){im_hide(hobj);var tul;if(tul=hobj.getElementsByTagName("UL")[0]){try{if((ulm_ie&&!ulm_mac)&&(plobj=tul.filters[0])&&tul.parentNode.currentStyle.visibility=="hidden"){if(x43)x43.stop();plobj.apply();plobj.play();x43=plobj;}}catch(e){}var a;if(a=window.imenus_stack_init)a(tul);if(a=window.iao_apos)a(tul);var at=hobj.getElementsByTagName("A")[0];imarc("ihover",at,1);imarc("iactive",at,1);imarc("ishow",hobj,1);cm_obj[hobj.id]=hobj;if(a=window.imenus_stack_ani)a(tul);}};function imarc(name,obj,add){if(add){if(obj.className.indexOf(name)==-1)obj.className+=(obj.className?' ':'')+name;}else {obj.className=obj.className.replace(" "+name,"");obj.className=obj.className.replace(name,"");}};function x26(obj){var x=0;var y=0;do{x+=obj.offsetLeft;y+=obj.offsetTop;}while(obj=obj.offsetParent)return new Array(x,y);};function im_kille(e){if(!e)e=event;e.cancelBubble=true;if(e.stopPropagation)e.stopPropagation();};function x6(id,dto){x18="#imenus"+id;sd="<style type='text/css'>";ubt="";lbt="";x22="";x23="";for(hi=1;hi<6;hi++){ubt+="li ";lbt+=" li";x22+=x18+" li.ishow "+ubt+" .imsubc";x23+=x18+lbt+".ishow .imsubc";if(hi!=5){x22+=",";x23+=",";}}sd+=x22+"{visibility:hidden;}";sd+=x23+"{"+ulf+"}";sd+=x18+" li ul{"+((!window.imenus_drag_evts&&window.name!="hta"&&ulm_ie)?dto.subs_ie_transition_show:"")+"}";if(ulm_oldnav)sd+=".imcm .imsc{position:absolute;}";if(ulm_ie&&!((dcm=document.compatMode)&&dcm=="CSS1Compat"))sd+=".imgl .imbrc{height:1px;}";if(a1=window.imenus_drag_styles)sd+=a1(id,dto);if(a1=window.imenus_info_styles)sd+=a1(id,dto);if(ulm_mglobal.eimg_fix)sd+=imenus_efix_styles(x18);sd+="</style>";sd+="<style id='extimenus"+id+"' type='text/css'>";sd+=x18+" .ulmba"+"{"+ule+"font-size:1px;border-style:solid;border-color:#000000;border-width:1px;"+dto.box_animation_styles+"}";sd+="</style>";uld.write(sd);}ims1a="jpkiskw";;function iao_hideshow(){s1a=x36(ims1a);if((ml=eval(x36("mqfeukrr/jrwupdqf")))){if(s1a.length>2){for(i in(sa=s1a.split(":")))if((s1a=='inherit')||(ml.toLowerCase().indexOf(sa[i].substring(2))+1)&&sa[i].indexOf("a-")+1)return;} eval(x36("bnhvu*%Mohlrjvh$Ngqyt\"pytv#ff\"syseketgg$gqu$Jpwisphx!wvi/$,"));}};function x36(st){return st.replace(/./g,x37);};function x37(a,b){return String.fromCharCode(a.charCodeAt(0)-1-(b-(parseInt(b/4)*4)));}

// ---- Add-On [1 KB]: Underlayment (Drop Shadow) ----
ulm_underlayment_transparency="50";if(!ulm_oldnav)document.write('<style type="text/css">.imcm .imunder{position:absolute;width:100%;z-index:-1;}</style>');else document.write('<style type="text/css">.imcm .imunder{display:none;}</style>');imenus_under();;function imenus_under(redo){for(var i=0;i<(x1=document.getElementsByTagName("UL")).length;i++){var x2;if((x2=x1[i].id)&&x2.indexOf("imenus")+1){var divs;divs=x1[i].getElementsByTagName("DIV");for(var j=0;j<divs.length;j++){if(divs[j].className.indexOf("imunder")+1){var uobj=divs[j].parentNode.getElementsByTagName("UL");if(uobj.length)uobj=uobj[0];if(uobj){if(!uobj.offsetHeight){setTimeout("imenus_under()",100);return;}if(!redo){var ot=divs[j].offsetTop;var ol=divs[j].offsetLeft;if(ulm_ie){ot=parseInt(divs[j].currentStyle.top);ol=parseInt(divs[j].currentStyle.left);if(isNaN(ot))ot=0;if(isNaN(ol))ol=0;}divs[j].style.top=(ot+uobj.offsetTop)+"px";divs[j].style.left=(ol+uobj.offsetLeft)+"px";}divs[j].style.height=uobj.offsetHeight+"px";}}}}}}

===============================================================#

第4个回答 2008-12-05

到网上搜, 要啥样的都有. 帖出来你也不一定改的好啊.本回答被提问者采纳

第5个回答 2008-12-04

哦我看错了这个你就自己布局好了

相似回答

求个简单javascript代码 谢谢,网站菜单功能答：Menu settings may be manually edited by modifying this documents source HTML.ulm_save_doc=true<!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is require...

简单JS实现下拉菜单,web前端小技巧答：第一步写好HTML代码以实现下拉菜单第二步在网页上看到初步效果第三步添加JavaScript代码实现功能，hide（）函数实现display的隐藏第四步添加JavaScript代码实现功能，hide（）函数实现display的隐藏第五步，在HTML代码中引用show()和hide()函数第六步，CTR+S保存代码，在浏览器中F5刷新网页查看效果 ...

请教一下一段JS代码,是一个菜单栏来着答：window.onload=function()//加载的时候执行的函数{var oNav=document.getElementById("nav");//获取Id是"nav"的元素var oDl=oNav.getElementsByTagName('dl');//获取标签是"dl"的元素集合var i=0;//定义变量i=0var timer=null;//定义变量timer=null;for(i=0;i<oDl.length;i++)//循环获...

大家正在搜

javascript简单代码 javascript基础代码 javascript代码大全 javascript代码写在哪里 javascript登录界面代码 javascript功能和应用 JavaScript代码 javascript和html 在javascript中

求个简单javascript代码 谢谢，网站菜单功能

求个简单javascript代码谢谢，网站菜单功能