|
描述:Menu
图片:
描述:line.gif
图片:
网上有不少js编写的下拉菜单,但普遍来说,都是代码极其复杂,或者使用(维护)起来困难重重,这个下拉菜单是我为一个客户刚刚写的,美观性来说还是不错的,在asp.net下我是用一个管理页面自动生成这个菜单的,不过为了方便其它的朋友,故整理出来,希望可以对你的网页添姿添彩。
(一共有三个文件,包括一张图片line.gif,一个js文件,一个html文件)
menu.js
复制代码 function MenuClick(div,key){
var str = "";
for(var o = 0; o < menus.length; o++){
if(menus[o]["name"].toUpperCase() == key.toUpperCase().replace(" ","")){
str = "<table border=0 bgColor=#A7A7A7 cellpading=0 cellspacing=0><tr><td>"
+ "<table width=80px cellpading =0 cellspacing=0 border=0 bgColor=#A8CBEC>";
var tempArr = menus[o]["List"];
for(var j = 0;j < tempArr.length;j++){
var content = tempArr[j];
var name = tempArr[j].split("|")[0];
var url = tempArr[j].split("|")[1];
var target = "_self";
if(tempArr[j].split("|").length > 2){
target = tempArr[j].split("|")[2];
}
str += "<tr class=menulink OnMouseOut=\"this.style.background='#165DB2'\" align=left ";
str += " onMouSeover=\"this.style.background='#4784CD'\" bgcolor='#165DB2'>";
str += "<td nowrap><a href='" + url + "'";
str += " target='" + target + "'" ;
str += ">";
str += "<font color='#FFFFFF'> " + name + " </font>";
str += "</a></td></tr>";
}
str +="</table></td></tr></table>";
popMenu(div,str);
return;
}
}
}
function popMenu(div,str){
var x = event.srcElement.offsetLeft;
var y = event.srcElement.offsetTop;
var parent = event.srcElement.parentElement;
while(parent.nodeName.toUpperCase()!="BODY"){
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
y += event.srcElement.offsetHeight;
div.innerHTML = str;
div.style.display = "block";
if(div.style.width < event.srcElement.offsetWidth){
div.offsetwidth = event.srcElement.offsetWidth;
}
div.style.pixelLeft = x;
div.style.pixelTop = y;
}
function hideMenu(div){
div.style.display='none';
}
function hide(){
var div = document.all.menuDiv;
hideMenu(div);
}
function pop(key){
var div = document.all.menuDiv;
MenuClick(div,key);
}
function getMenuTD(haveSubs, curKey, curUrl, curUrlTitle, target) {
if(target == null) {
target = "_self";
}
var ret = "<td width='1%' nowrap";
if(haveSubs) {
ret = ret + " onMouseOut=hide() onMouseOver=\"pop('" + curKey + "')\"";
}
ret = ret + "><a href='" + curUrl + "' target='" + target + "'><font color='#FFFFFF'>" + curUrlTitle + "</font></a></td>";
return ret;
}
//--管理菜单--------------------------------------
var urlRoot = "";
var menus = new Array();
var pos = -1 ;
pos++;
menus[pos] = new Array();
menus[pos]["name"] = "Commend";
menus[pos]["List"] = new Array();
var index = 0;
menus[pos]["List"][index++] = "电脑诊所|" + urlRoot + "aaa.html";
menus[pos]["List"][index++] = "菜鸟学院|" + urlRoot + "bbb.html";
menus[pos]["List"][index++] = "交易中心|" + urlRoot + "ccc.html";
pos++;
menus[pos] = new Array();
menus[pos]["name"] = "Intercourse";
menus[pos]["List"] = new Array();
var index = 0;
menus[pos]["List"][index++] = "软件应用|" + urlRoot + "ddd.html";
menus[pos]["List"][index++] = "软件下载|" + urlRoot + "eee.html";
menus[pos]["List"][index++] = "安全专区|" + urlRoot + "fff.html";
menus[pos]["List"][index++] = "硬件世界|" + urlRoot + "ggg.html";
menus[pos]["List"][index++] = "网络世界|" + urlRoot + "hhh.html";
menus[pos]["List"][index++] = "图像设计|" + urlRoot + "iii.html";
pos++;
menus[pos] = new Array();
menus[pos]["name"] = "Feature";
menus[pos]["List"] = new Array();
var index = 0;
menus[pos]["List"][index++] = "个人专版|" + urlRoot + "jjj.html";
menus[pos]["List"][index++] = "联盟版块|" + urlRoot + "kkk.html";
pos++;
menus[pos] = new Array();
menus[pos]["name"] = "Pastime";
menus[pos]["List"] = new Array();
var index = 0;
menus[pos]["List"][index++] = "情感驿站|" + urlRoot + "lll.html";
menus[pos]["List"][index++] = "影视中心|" + urlRoot + "mmm.html";
menus[pos]["List"][index++] = "音乐听听|" + urlRoot + "nnn.html" ;
menus[pos]["List"][index++] = "贴图中心|" + urlRoot + "ooo.html" ;
menus[pos]["List"][index++] = "灌水中心|" + urlRoot + "ppp.html" ;
menus[pos]["List"][index++] = "品味人生|" + urlRoot + "qqq.html" ;
pos++;
menus[pos] = new Array();
menus[pos]["name"] = "Support";
menus[pos]["List"] = new Array();
var index = 0;
menus[pos]["List"][index++] = "事务中心 |" + urlRoot + "rrr.html";
menus[pos]["List"][index++] = "管理中心 |" + urlRoot + "sss.html" ;
pos++;
menus[pos] = new Array();
menus[pos]["name"] = "About";
menus[pos]["List"] = new Array();
var index = 0;
menus[pos]["List"][index++] = "管理制度|" + urlRoot + "ttt.html";
menus[pos]["List"][index++] = "有奖调查|" + urlRoot + "uuu.html";
menus[pos]["List"][index++] = "免费相册|" + urlRoot + "vvv.html";
menus[pos]["List"][index++] = "诗文论坛|" + urlRoot + "www.html";
//---生成菜单代码------------------------------------------------------------------------------------------
var menuDiv = "<div id=menuDiv style='position:absolute;left:0px,top:0px;display:none;background-color:#000000;border:0px,z-index:4'"
+ " onMouseOver=\"this.style.display='block'\" onMouseOut=\"this.style.display='none'\"></div>";
var menuTableTr = "<table width='780' align='center' height='24' border='0' cellpadding='0' cellspacing='0' bgcolor='165DB2''><tr nowrap><TD width='10' bgColor='#165db2'></TD>"
var menuTrTable = "</tr></table><table border='0' cellpadding='0' cellspacing='0'><TR><TD height='3'></TD></TR></table>"
var menuSprTd = "<td width='1%' nowrap><img src='" + urlRoot + "line.gif' height='7'></td>";
document.write(menuDiv + menuTableTr);
document.write(menuSprTd + getMenuTD(false, "Home", "http://www.cfanhome.com/", "电脑爱好者俱乐部"));
document.write(menuSprTd + getMenuTD(true, "Commend", urlRoot + "Commend.html", "特别推荐"));
document.write(menuSprTd + getMenuTD(true, "Intercourse", urlRoot + "Intercourse.html", "技术交流"));
document.write(menuSprTd + getMenuTD(true, "Feature", urlRoot + "Feature.html", "活动特色"));
document.write(menuSprTd + getMenuTD(true, "Pastime", urlRoot + "Pastime.html", "娱乐休闲"));
document.write(menuSprTd + getMenuTD(true, "Support", urlRoot + "Support.html", "事务管理"));
document.write(menuSprTd + getMenuTD(false, "Dakuai", urlRoot + "dakuai.html", "大块文章"));
document.write(menuSprTd + getMenuTD(true, "About", urlRoot + "about.html", "关于俱乐部"));
document.write(menuSprTd);
document.write(menuTrTable);
html文件代码:
复制代码
<html>
<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
<!--
A:link {FONT-SIZE: 9pt; COLOR: #005493; FONT-FAMILY: "Arial"; TEXT-DECORATION: none}
A:visited {FONT-SIZE: 9pt; COLOR: #005493; FONT-FAMILY: "Arial"; TEXT-DECORATION: none}
A:hover {FONT-SIZE: 9pt; COLOR: #ff7f00; FONT-FAMILY: "Arial"; TEXT-DECORATION: underline}
A:active {FONT-SIZE: 9pt; COLOR: #ff7f00; FONT-FAMILY: "Arial"; TEXT-DECORATION: none}
TABLE {COLOR: #000000; LINE-HEIGHT: 150%; FONT-FAMILY: "Arial"}
-->
</style>
</head>
<body>
<SCRIPT language=JavaScript src="menu.js"></SCRIPT>
</body>
</html>
重点代码解释:
1.html中只需在body想显示菜单的地方加入<SCRIPT language=JavaScript src="menu.js"></SCRIPT>就可以了,但里面的menu.js必须和你的js文件名一样
2.维护菜单时候只需要增加以下代码(以下红色部分可改)
pos++;
menus[pos] = new Array();
menus[pos]["name"] = "Feature";
menus[pos]["List"] = new Array();
var index = 0;
menus[pos]["List"][index++] = "个人专版|" + urlRoot + "jjj.html";
menus[pos]["List"][index++] = "联盟版块|" + http://www.cfanhong.com;
3.在最后生成的那段代码里加入(以下红色部分可改)
document.write(menuSprTd + getMenuTD(true, "Feature", urlRoot + "Feature.html", "活动特色"));
4.需注意的是2,3点中name(如:Feature)必须一致才能关联
5.第3点中那个true表示显示下拉菜单,可改为false就不会显示了 |
|