Js编写的较美观且维护简单的下拉菜单

天使替我爱你

描述：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就不会显示了

日月明

大致看明白了，楼主的思维太过发散、太过跳跃了。楼主，加强集中精力叙述一件事情的能力。不要再发散了

ah_Ben

有时候，不是对方不在乎你，而是你把对方看的太重。