一个简单的仿XP的JS下拉菜单

WindySky 2007-01-20

展开全文

一个简单的仿xp的js下拉菜单，本来想用在我的网站的后台管理，但后来发现不实用，还是采用了左右框架的树型菜单，但这个程序既然写出来了，贴出来，希望对其它人有用，有兴趣的朋友可以对快捷键功能进行扩展，目前留有接口，但未实现。

menu.htm（菜单主文件）
<html>
<head>
  <title>Noteless Valley()程序示例</title>
  <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <link href="xp_menu.css" rel="stylesheet" type="text/css">
  <script language="javascript" src="xp_menu.js"></script>
  <script language="javascript" for="document" event="onselectstart">

  </script>
  <script language="javascript" for="document" event="onclick">

  </script>
</head>
<body scroll="no" language="javascript" onresize="return window_onresize()" onload="return window_onload()">
  <script language="javascript">

  </script>
  <table border=0 cellpadding=0 cellspacing=0><tr><td height=27>此部分已经被顶部菜单条覆盖</td></tr></table>
  <p id=lblOutput>信息提示区域</p>
</body>
</html>

xp_menu.css（样式表）
body {
FONT-SIZE: 13px;
MARGIN: 0px;
SCROLLBAR-SHADOW-COLOR: silver;
SCROLLBAR-3DLIGHT-COLOR: silver;
LINE-HEIGHT: 20px;
FONT-FAMILY: Verdana, 宋体;
SCROLLBAR-DARKSHADOW-COLOR: silver;
BACKGROUND-COLOR: #ff99cc;
border: none;
}

DIV.MainMenuBG
{
border-right: teal 1px solid;
font-size: 14px;
border-left: #ffffff 1px solid;
cursor: default;
color: #000000;
border-bottom: teal 1px solid;
font-family: Verdana, 宋体;
position: absolute;
background-color: #d6d3ce;
}
DIV.MainMenu
{
border-right: #d6d3ce 1px solid;
padding-right: 8px;
border-top: #d6d3ce 1px solid;
padding-left: 8px;
padding-bottom: 1px;
border-left: #d6d3ce 1px solid;
cursor: default;
padding-top: 1px;
border-bottom: #d6d3ce 1px solid;
position: absolute;
background-color: #d6d3ce;
}
DIV.MainMenuOver
{
border-right: #08246b 1px solid;
padding-right: 8px;
border-top: #08246b 1px solid;
padding-left: 8px;
padding-bottom: 1px;
border-left: #08246b 1px solid;
cursor: default;
padding-top: 1px;
border-bottom: #08246b 1px solid;
position: absolute;
background-color: #b5bed6;
}
DIV.MainMenuClick
{
border-right: #636563 1px solid;
padding-right: 8px;
border-top: #636563 1px solid;
padding-left: 8px;
padding-bottom: 1px;
border-left: #636563 1px solid;
cursor: default;
padding-top: 1px;
border-bottom: #636563 1px solid;
position: absolute;
background-color: #dedbd6;
}
DIV.SubMenuBG
{
border-right: #636563 1px solid;
border-top: #636563 1px solid;
font-size: 14px;
visibility: hidden;
border-left: #636563 1px solid;
color: #000000;
border-bottom: #636563 1px solid;
font-family: Verdana, 宋体;
position: absolute;
background-color: #fffbf7;
}
DIV.SubMenu
{
cursor: default;
position: absolute;
}
DIV.SubMenuOver
{
cursor: default;
position: absolute;
}
TD.ico
{
border-top: #dedbd6 1px solid;
border-left: #dedbd6 1px solid;
border-bottom: #dedbd6 1px solid;
background-color: #dedbd6;
}
TD.icoOver
{
border-top: #08246b 1px solid;
border-left: #08246b 1px solid;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
border-right-width: 1px;
border-right-color: #08246b;
}
TD.text
{
padding-right: 2px;
border-top: #fffbf7 1px solid;
padding-left: 5px;
border-bottom: #fffbf7 1px solid;
background-color: #fffbf7;
}
TD.textOver
{
padding-right: 2px;
border-top: #08246b 1px solid;
padding-left: 5px;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
TD.skey
{
padding-right: 2px;
border-top: #fffbf7 1px solid;
padding-left: 2px;
border-bottom: #fffbf7 1px solid;
background-color: #fffbf7;
}
TD.skeyOver
{
padding-right: 2px;
border-top: #08246b 1px solid;
padding-left: 2px;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
TD.sub
{
border-right: #fffbf7 1px solid;
border-top: #fffbf7 1px solid;
border-bottom: #fffbf7 1px solid;
background-color: #fffbf7;
}
TD.subOver
{
border-right: #08246b 1px solid;
border-top: #08246b 1px solid;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
DIV.SubMenu TD
{
font-size: 14px;
padding-top: 2px;
}

xp_menu.js（.js包含文件）
<!--
// menu source code

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// 以下为建立菜单的部分
//_______________________________________

//菜单条的结构
function menu_bar(name,ico,text,key,tip,skey,type,cmd) {
  this.name = name;     //名称
  this.ico = ico;      //图标
  this.text = text;     //文字
  this.key = key;      //热键
  this.tip = tip;      //提示
  this.skey = skey;     //快捷键
  this.type = type;     //命令类型，0为弹出下级菜单，1为执行一个命令(跳转到另一个文件)
  this.cmd = cmd;      //下级菜单的名称或命令字符串，根据type的值而定
}

//菜单的结构
function menu(name) {
  this.name = name;      //名称
  this.bar = new Array();   //所包含的菜单条数组
}

//输出一已定义的主菜单，横排的
function popMainMenu(menu,left,top,width,height) {

  var strHTML, posLeft, posTop, i;

  strHTML = "<div id=‘" + menu.name + "‘ style=‘left:" + left + ";top:" + top + ";width:" + width + ";height:" + height + "‘ class=‘MainMenuBG‘>"
  document.write (strHTML);

  posLeft = 2;
  posTop = 1;
  for (i=0;i<menu.bar.length;i++) {
   strHTML = "<div id=‘" + menu.bar[i].name + "‘ nowrap style=‘left:" + posLeft + ";top:" + posTop + ";‘ class=‘MainMenu‘ " +
        "onmouseover=‘return menu_onmouseover(this,\"" + menu.bar[i].cmd + "\")‘ onmouseout=‘return menu_onmouseout(this)‘ " +
        "onclick=‘return menu_onclick(this,\"" + menu.bar[i].cmd + "\")‘ title=‘" + menu.bar[i].tip + "‘>" + menu.bar[i].text;
   if (menu.bar[i].key!="") {
    strHTML += "(<u>" + menu.bar[i].key + "</u>)";
   }
   strHTML += "</div>";
   document.write (strHTML);
   posLeft += document.all.item(menu.bar[i].name).offsetWidth + 1;
  }

  strHTML = "</div>";
  document.write (strHTML);
}

//输出一个已定义的子菜单，竖排的
function popSubMenu(menu) {

  var strHTML, posLeft, posTop, i;

  strHTML = "<div id=‘" + menu.name + "‘ style=‘left:20;top:30;width:244;height:300;‘ class=‘SubMenuBG‘>"
  document.write (strHTML);

  posLeft = 1;
  posTop = 1;

  for (i=0;i<menu.bar.length;i++) {
   if (menu.bar[i].name!="\-") {    //如果名称不是“\-”，表示是一个普通菜单条
    strHTML = "<div id=‘" + menu.bar[i].name + "‘ style=‘left:" + posLeft + ";top:" + posTop + ";‘ class=‘SubMenu‘ " +
         "title=‘" + menu.bar[i].tip + "‘ " +
         "onmouseover=‘return bar_onmouseover(this," + menu.bar[i].type + ",\"" + menu.bar[i].cmd + "\")‘ " +
         "onmouseout=‘return bar_onmouseout(this," + menu.bar[i].type + ",\"" + menu.bar[i].cmd + "\")‘ " +
         "onclick=‘return bar_onclick(this," + menu.bar[i].type + ",\"" + menu.bar[i].cmd + "\")‘>" +
         " <table border=0 cellspacing=0 cellpadding=0 width=240>" +
         "    <tr>" +
         "      <td nowrap align=center width=20 id=‘" + menu.bar[i].name + "_ico‘ class=‘ico‘>";
    if (menu.bar[i].ico!="") {
     strHTML += "<img border=0 width=16 height=16 src=‘" + menu.bar[i].ico + "‘>";
    }else {
     strHTML += " ";
    }
    strHTML += "</td>" +
         "      <td nowrap id=‘" + menu.bar[i].name + "_text‘ class=‘text‘>" + menu.bar[i].text;
    if (menu.bar[i].key!="") { strHTML = strHTML + "(<u>" + menu.bar[i].key + "</u>)"; }
    strHTML += "</td>" +
         "<td nowrap align=right id=‘" + menu.bar[i].name + "_skey‘ class=‘skey‘>";
    if (menu.bar[i].skey!="") {
     strHTML += menu.bar[i].skey;
    }else {
     strHTML += " ";
    }
    strHTML += "     </td>" +
         "      <td nowrap align=center width=20 id=‘" + menu.bar[i].name + "_sub‘ class=‘sub‘>";
    if (menu.bar[i].type==0) {
     strHTML += "→";
    }else {
     strHTML += "  ";
    }
    strHTML += "</td>" +
         "    </tr>" +
         " </table>" +
         "</div>";
    document.write (strHTML);
    posTop += document.all.item(menu.bar[i].name).offsetHeight;
   }else {       //如果名称是“\-”，表示是一条分隔线
    strHTML = "<div style=‘left:" + posLeft + ";top:" + posTop + ";‘ class=‘SubMenu‘>" +
         " <table border=0 cellpadding=0 cellspacing=0 width=240>" +
         "    <tr>" +
         "      <td nowrap style=‘background-color: #dedbd6;‘ width=21></td>" +
         "      <td nowrap style=‘padding-left:5px;padding-top:1px;padding-bottom:1px;‘>" +
         "        <table border=0 cellpadding=0 cellspacing=0 width=100%>" +
         "          <tr><td height=1 bgcolor=‘#636563‘></td></tr>" +
         "        </table>" +
         "      </td>" +
         "    </tr>" +
         " </table>" +
         "</div>";
    document.write (strHTML);
    posTop += 3;
   }
  }

  strHTML = "</div>"
  document.write (strHTML);
  document.all.item(menu.name).style.height = posTop+3;    //重设子菜单背景框
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// 以下为操纵菜单的部分
//_________________________________________________

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// 以下为与主文件有关的控制部分，具体使用时需要关注的也仅仅这部分而已
//_____________________________________________________________

var doc_width;    //当前窗口的宽度，随窗口大小改变而改变
var doc_height;    //当前窗口的高度，随窗口大小改变而改变

var mClick = false;   //一级菜单是否被点击，初始一级菜单是未被点击状态
var bMenuClick = false;    //单击是否是在一个菜单上，初始单击不是在一个菜单上
var mnuPrev = new Array();   //当前显示的菜单ID数组，初始为空

function document_onselectstart() {
return false; //屏蔽内容选择功能
}