（转）XP风格的菜单

file:coolmenu1_0_2.js

//------------------------------------------------------------
// Copyright (c) 2003-2004 LeadinSoft. All rights reserved.
// Version 1.0.2
// Ahthor dolphin
//------------------------------------------------------------

//单个菜单的结构
function menu(mnuName,mnuText,mnuAlt,mnuIcon,mnuTarget,mnuKey,mnuType,mnuCmd){
 this.name   = mnuName;
 this.text = mnuText;
 this.alt = mnuAlt;
 this.icon = mnuIcon;
 this.target = mnuTarget;
 this.key = mnuKey;
 this.type = mnuType;
 this.cmd = mnuCmd;
}

//菜单组结构
function CMenu(mnuName){
 this.name = mnuName;
 this.menu = new Array();
}

function ActiveMenu(mnuID,mnuType){
 this.id   = mnuID;
 this.type = mnuType;
}

//打印主菜单(Main-CM)
function drawMainMenu(CM, width, height){
 var HTMLStr, posLeft, posTop, i;

 HTMLStr = "<div id='" + CM.name + "' class='CM_MainMenuBar' style='width:"+ width + ";height:"+ height + "'>";
 document.write(HTMLStr);
 
 var obj  = document.all(CM.name);
 posLeft  = obj.offsetLeft;
 posTop  = obj.offsetTop;
 var pobj = obj.offsetParent;
 while(pobj.tagName.toUpperCase() != "BODY"){
  posLeft += pobj.offsetLeft;
  posTop  += pobj.offsetTop;
  pobj =  pobj.offsetParent;
 }
 
 posLeft += 2;
 posTop  += 3;
 for(i=0; i<CM.menu.length; i++){
  HTMLStr = "<div id='" + CM.menu[i].name + "' nowrap class='CM_MainMenu' style='left:" + posLeft + ";top:" + posTop + ";height:21px' onmouseover='return CMM_Over(this,\"" + CM.menu[i].cmd + "\")' onmouseout='return CMM_Out(this)' " +
        "onclick='return CMM_Click(this,\"" + CM.menu[i].cmd + "\")' title='" + CM.menu[i].alt + "'>" + CM.menu[i].text;
  if(CM.menu[i].key != ""){
   HTMLStr += "(<u>" + CM.menu[i].key + "</u>)";
  }
  HTMLStr += "</div>";
  document.write(HTMLStr);
  posLeft += document.all.item(CM.menu[i].name).offsetWidth + 1;
 }

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

function drawSubMenu(CM){
 var HTMLStr, i, maxLn = 0;
 HTMLStr = "<div id='"+ CM.name +"' style='left:0px;top:0px;width:150px;overflow:hidden' class='CM_SubMenuBar'>";
 document.write(HTMLStr);

 for(i=0; i<CM.menu.length; i++){
  tmp = getTextLength(CM.menu[i].text);
  if(maxLn < tmp) maxLn = tmp;

  HTMLStr  = "<div id='"+ CM.menu[i].name +"' class='CM_SubMenu'"+
       " title='"+ CM.menu[i].alt +"'"+
       " onmouseover=\"CMS_Over(this,"+ CM.menu[i].type +",'"+ CM.menu[i].cmd +"')\""+
       " onmouseout=\"CMS_Out(this,"+ CM.menu[i].type +",'"+ CM.menu[i].cmd +"')\""+
       " onclick=\"CMS_Click(this,"+ CM.menu[i].type +",'"+ CM.menu[i].cmd +"')\">";
  HTMLStr += "<table border=0 cellspacing=0 cellpadding=0 width='100%' align='center'>";
  HTMLStr += "<tr nowrap height=20><td nowrap width=1></td>";
  HTMLStr += formatImage(CM.menu[i].icon,CM.menu[i].name);
  HTMLStr += "<td id='"+ CM.menu[i].name +"_text' class='CM_Text'>"+ CM.menu[i].text;
  if(CM.menu[i].key != ""){
   HTMLStr += "(<u>"+ CM.menu[i].key +"</u>)";
  }
  HTMLStr += "</td>";
  HTMLStr += "<td id='"+ CM.menu[i].name +"_sub' nowrap align=center width=16 class='CM_Sub'>";
  if(CM.menu[i].type == 0){
   HTMLStr += "<span class='SubFlag'>}</span>";
  }
  else{
   HTMLStr += "&nbsp;"
  }
  HTMLStr += "</td>"+
       "<td nowrap width=1 class='CM_Space'></td></tr></table></div>";

  document.write (HTMLStr);
 }

 HTMLStr = "</div>";
 document.write(HTMLStr);
 document.all.item(CM.name).style.width = maxLn*10+40;
 //test.value += document.all.item(CM.name).outerHTML;
}

function formatImage(mnuIcon, mnuName){
 var result = "<td id='"+ mnuName +"_ico' nowrap align=center width=20 class='CM_Icon'>";
 if(mnuIcon != ""){
  result += "<IMG SRC='"+ mnuIcon +"' BORDER='0'>";
 }
 else{
  result += "&nbsp;";
 }
 result += "</td>";

 return result;
}

function getTextLength(text){
    var ln = 0;
    for(var i=0; i<text.length; i++){
        if(text.charCodeAt(i) > 256){
          ln++;
        }
        ln++;
    }
    return ln;
}

function showMenu(mnuObj,mnuSubID){
 var l = mnuObj.offsetLeft - 1;
 var t = mnuObj.offsetTop + mnuObj.offsetHeight;
 document.all.item(mnuSubID).style.left = l; //设置子菜单位置
 document.all.item(mnuSubID).style.top  = t;  //设置子菜单的位置
 document.all.item("overline").style.left = l + 2;
 document.all.item("overline").style.top  = t;
 document.all.item("overline").style.width = mnuObj.offsetWidth - 2;
 document.all.item("overline").style.visibility = "visible";

 document.all.item(mnuSubID).style.visibility = "visible";   //显示子菜单
 g_actMenu[g_actMenu.length] = new ActiveMenu(mnuSubID,1);
 
 if(g_shadowStr != null){
  mnuObj.style.filter = g_shadowStr;
  document.all.item(mnuSubID).style.filter = g_shadowStr;
 }
}

function showSubMenu(mnuObj,mnuSubID){
 var l = mnuObj.parentElement.offsetLeft + mnuObj.offsetLeft + mnuObj.offsetWidth + 2;
 var t = mnuObj.parentElement.offsetTop + mnuObj.offsetTop + 1;

 var mnuSubObj = document.all.item(mnuSubID);
 if(l+mnuSubObj.offsetWidth>g_scrWidth)
  mnuSubObj.style.left = mnuObj.parentElement.offsetLeft - mnuSubObj.offsetWidth - 2;
 else
  mnuSubObj.style.left = l;
 if(t+mnuSubObj.offsetHeight>g_scrHeight)
  mnuSubObj.style.top = g_scrHeight - mnuSubObj.offsetHeight;
 else
  mnuSubObj.style.top = t;

 mnuSubObj.style.visibility = "visible";
 g_actMenu[g_actMenu.length] = new ActiveMenu(mnuSubID,1);
}

function CMM_Over(obj, cmd){
 if(!g_blnMMClick){
  obj.className = "CM_MainMenuOver";
  g_actMenu[g_actMenu.length] = new ActiveMenu(obj.id,0);
 }
 else{
  if(g_actMenu[0].id == obj.id) return;
  document.all.item(g_actMenu[0].id).className = "CM_MainMenu";
  for(var i=1;i<g_actMenu.length;i++){
   if (g_actMenu[i].type == 0) {
    document.all.item(g_actMenu[i].id + "_ico").className  = "CM_Icon";
    document.all.item(g_actMenu[i].id + "_text").className = "CM_Text";
    document.all.item(g_actMenu[i].id + "_sub").className  = "CM_Sub";
   }
   else{
    document.all.item(g_actMenu[i].id).style.visibility = "hidden";
   }
  }
  g_actMenu.length = 0;
  obj.className    = "CM_MainMenuClick";
  g_actMenu[g_actMenu.length] = new ActiveMenu(obj.id,0);
  showMenu(obj,cmd);
 }
}

function CMM_Out(obj){
 if(!g_blnMMClick){
  obj.className = "CM_MainMenu";
  g_actMenu.length --;
 }
}

function CMM_Click(obj,cmd){
 if(!g_blnMMClick){
  obj.className = "CM_MainMenuClick";
  showMenu(obj,cmd);
  g_blnMMClick = true;
 }
 else{
  document_click();
 }
 g_blnSMClick = true;

 if(!g_blnMMClick) CMM_Over(obj, cmd);
}

function CMS_Over(obj, type, cmd){
 for(var i=1;i<g_actMenu.length;i++){
  if(g_actMenu[i].id == obj.parentElement.id){
   for(var j=i+1;j<g_actMenu.length;j++){
    if(g_actMenu[j].type == 0){
     document.all.item(g_actMenu[j].id + "_ico").className  = "CM_Icon";
     document.all.item(g_actMenu[j].id + "_text").className = "CM_Text";
     document.all.item(g_actMenu[j].id + "_sub").className  = "CM_Sub";  
    }
    else{
     document.all.item(g_actMenu[j].id).style.visibility = "hidden";
    }
   }
   g_actMenu.length = i+1;
   break;
  }
 }
 
 g_actMenu[g_actMenu.length] = new ActiveMenu(obj.id,0);
 //showstatus();
 document.all.item(obj.id + "_ico").className  = "CM_IconOver";
 document.all.item(obj.id + "_text").className = "CM_TextOver";
 document.all.item(obj.id + "_sub").className  = "CM_SubOver";

 if(type == 0){
  showSubMenu(obj,cmd);
 }
 //showstatus();
}

function CMS_Out(obj, type, cmd){
 if(type != 0){
  document.all.item(obj.id + "_ico").className  = "CM_Icon";
  document.all.item(obj.id + "_text").className = "CM_Text";
  document.all.item(obj.id + "_sub").className  = "CM_Sub"; 
  
  if(g_actMenu.length > 0) g_actMenu.length --;
 }
 //showstatus();
}

function CMS_Click(obj, type, cmd){
 if(type == 1){
  document_click();
  document.all.item("overline").style.visibility = "hidden";
  lblMsg.innerText = cmd;
 }
 else{
  g_blnSMClick = true;
 }
}

function document_click(){
 if(g_blnSMClick){
  g_blnSMClick = false;
  return;
 }

 if(g_actMenu.length >0){
  for(var i=1; i<g_actMenu.length; i++){
   if(g_actMenu[i].type == 0){
    document.all.item(g_actMenu[i].id + "_ico").className  = "CM_Icon";
    document.all.item(g_actMenu[i].id + "_text").className = "CM_Text";
    document.all.item(g_actMenu[i].id + "_sub").className  = "CM_Sub"; 
   }
   else{
    document.all.item(g_actMenu[i].id).style.visibility = "hidden";
   }
  }
  document.all.item(g_actMenu[0].id).className = "CM_MainMenu";
  document.all.item("overline").style.visibility = "hidden";
 }
 g_actMenu.length = 0;
 g_blnMMClick = false;
}

function window_onload() {
 //初始化窗口尺寸
 g_scrHeight = window.document.body.offsetHeight;
 g_scrWidth  = window.document.body.offsetWidth;
}

function showstatus() {   //测试阶段用的函数，显示当前菜单ID数组内的内容
 lblMsg.innerText = "";
 for(var i=0;i<g_actMenu.length;i++) {
  lblMsg.innerText += g_actMenu[i].id + " > ";
 }
}

document.write("<div id='overline' class='CM_OverLine' style='left:100px;top:300px;width:100px;overflow:hidden'><table border=0 cellpadding=0 cellspacing=0 width='100%'><tr height=1><td width='100%' style='background-color:#EFEDDE' ></td></tr><tr height=1><td width='100%' style='background-color:menu' ></td></tr></table></div>");
var g_blnMMClick   = false;
var g_actMenu = new Array();
var g_scrWidth, g_scrHeight;
var g_blnSMClick = false;

document.body.onload = window_onload;
document.onclick = document_click;
var g_shadowStr = null;
//var g_shadowStr = "progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=135, Strength=4)";

file:test1_0_2.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test CoolMenu1.0.2 For JS</TITLE>
<style>
BODY{
 FONT-SIZE: 12px;
 MARGIN: 0px;
 FONT-FAMILY: Verdana, 宋体;

}

DIV.CM_MainMenuBar
{
  border-right: threedface 1px solid;
  border-left: threedface 1px solid;
  border-bottom: threedface 1px solid;
  border-top: threedface 1px solid;
  background-color: threedface;
  padding-top: 2px;
  padding-bottom: 1px;
  cursor: default;
}
DIV.CM_MainMenu
{
  border-right: threedface 1px solid;
  padding-right: 8px;
  border-top: threedface 1px solid;
  padding-left: 8px;
  padding-bottom: 0px;
  border-left: threedface 1px solid;
  cursor: default;
  padding-top: 3px;
  border-bottom: threedface 1px solid;
  position: absolute;
  background-color: threedface;
}
DIV.CM_MainMenuOver
{
  border-right: #316AC5 1px solid;
  padding-right: 8px;
  border-top: #316AC5 1px solid;
  padding-left: 8px;
  padding-bottom: 0px;
  border-left: #316AC5 1px solid;
  cursor: default;
  padding-top: 3px;
  border-bottom: #316AC5 1px solid;
  position: absolute;
  background-color: #C1D2EE;
}

DIV.CM_MainMenuClick{
  border-right: #8A867A 1px solid;
  padding-right: 8px;
  border-top: #8A867A 1px solid;
  padding-left: 8px;
  padding-bottom: 1px;
  border-left: #8A867A 1px solid;
  cursor: default;
  padding-top: 3px;
  position: absolute;
  background-color: #EFEDDE;
}

DIV.CM_SubMenu TD
{
  font-size: 12px;
}
DIV.CM_SubMenuBar
{
  color: #000000;
  font-size: 12px;
  border-right: appworkspace 1px solid;
  border-top: appworkspace 1px solid;
  border-left: appworkspace 1px solid;
  border-bottom: appworkspace 1px solid;
  font-family: Verdana, 宋体;
  position: absolute;
  visibility: hidden;
  background-color: buttonface;
  margin-left: 1px;
  margin-right: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
}

DIV.CM_SubMenu
{
  cursor: default;
}

DIV.CM_OverLine{
  position: absolute;
  visibility: hidden;
  z-index:100;
  margin: 0px;
}

SPAN.SubFlag{
 font-size: 13px;
  text-align: right;
 cursor:default;
 font-family:"Wingdings 3";
}

TD.CM_Icon
{
  border-top: buttonface 1px solid;
  border-left: buttonface 1px solid;
  border-bottom: buttonface 1px solid;
  background-color: buttonface;
}

TD.CM_IconOver{
  border-top: #316AC5 1px solid;
  border-left: #316AC5 1px solid;
  border-bottom: #316AC5 1px solid;
  border-right-width: 1px;
  background-color: #C1D2EE;
}

TD.CM_Text
{
 padding-right: 2px;
 padding-left: 5px;
 padding-top: 2px;
 border-top: menu 1px solid;
 border-bottom: menu 1px solid;
 background-color: menu;
}

TD.CM_TextOver{
  padding-right: 2px;
  padding-left: 5px;
  padding-top: 2px;
  border-top: #316AC5 1px solid;
  border-bottom: #316AC5 1px solid;
  background-color: #C1D2EE;
}

TD.CM_Sub
{
  border-right: menu 1px solid;
  border-top: menu 1px solid;
  border-bottom: menu 1px solid;
  background-color: menu;
  text-align:center
}
TD.CM_SubOver
{
  border-right: #316AC5 1px solid;
  border-top: #316AC5 1px solid;
  border-bottom: #316AC5 1px solid;
  background-color: #C1D2EE;
  text-align:center;
}

TD.CM_Space{
  background-color: menu;
}
</style>
</HEAD>

<BODY>
<!-- <TEXTAREA id="test" ROWS="5" COLS="50"></TEXTAREA>
 --><br>
<span id="lblMsg">&nbsp;</span>
<br>
<p>
<SCRIPT LANGUAGE="JavaScript" src="coolmenu1_0_2.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
var mnuMain = new CMenu("mnuMain");   
mnuMain.menu[0] = new menu("mnuMainNL","无名谷","Noteless Valley","","","",0,"mnuNL");
mnuMain.menu[1] = new menu("mnuMainSiteAdmin","网站管理","网站管理","","","",0,"mnuSiteAdmin");
mnuMain.menu[2] = new menu("mnuMainSystem","系统管理","系统管理","","","",0,"mnuSystem");
mnuMain.menu[3] = new menu("mnuMainShow","演示菜单","Menu Show","","","",0,"mnuShow");

drawMainMenu(mnuMain,"100%",27);

var mnuNL = new CMenu("mnuNL");
mnuNL.menu[0] = new menu("mnuHomePage","首页","HomePage","","","",1,"http://lijun.org");
mnuNL.menu[1] = new menu("mnuDesign","网页设计","Design","images/i.p.edit.gif","","",1,"http://lijun.org/article.asp?topic=1");
mnuNL.menu[2] = new menu("mnuProgram","网络编程","Program","images/i.p.cont.individual.gif","","",1,"http://lijun.org/article.asp?topic=2");
mnuNL.menu[3] = new menu("mnuOthers","其它文章","Others","","","",1,"http://lijun.org/article.asp?topic=3");

drawSubMenu(mnuNL);

var mnuSiteAdmin = new CMenu("mnuSiteAdmin")
mnuSiteAdmin.menu[0] = new menu("mnuAddressUpdate","访问地区更新","访问地区更新","","","",1,"AddressUpdate.asp");

drawSubMenu(mnuSiteAdmin);

 var mnuSystem = new CMenu("mnuSystem");
 mnuSystem.menu[0] = new menu("mnuSysUser","用户管理","用户管理","","","",1,"userAdmin.asp");
 mnuSystem.menu[1] = new menu("mnuSysAuthority","权限管理","权限管理","","","",1,"authority.asp");
 mnuSystem.menu[2] = new menu("mnuSysPwdChange","口令修改","口令修改","","","",1,"chgpwd.asp");
 mnuSystem.menu[3] = new menu("mnuSysHelp","帮助","帮助","","","",1,"help.asp");
 mnuSystem.menu[4] = new menu("mnuSysAbout","关于本系统","关于本系统","","","",1,"about.asp");
 mnuSystem.menu[5] = new menu("mnuSysExit","退出本系统","退出系统","","","",1,"quit.asp");

 drawSubMenu(mnuSystem);

var mnuShow = new CMenu("mnuShow");
 mnuShow.menu[0] = new menu("mnuShow1","演示菜单一","Menu Show 1","images/i.p.trash.gif","","",1,"menushow1.asp");
 mnuShow.menu[1] = new menu("mnuShow2","演示菜单二","Menu Show 2","images/i.p.new.gif","","",1,"mnuShow_2");
 mnuShow.menu[2] = new menu("mnuShow3","演示菜单三","Menu Show 3","","","",1,"menushow3.asp");
 mnuShow.menu[3] = new menu("mnuShow4","演示菜单四","Menu Show 4","","","",1,"menushow4.asp");
 mnuShow.menu[4] = new menu("mnuShow5","演示菜单五","Menu Show 5","","","",0,"mnuShow_2");

 drawSubMenu(mnuShow);

 var mnuShow_2 = new CMenu("mnuShow_2");
 mnuShow_2.menu[0] = new menu("mnuShow21","演示菜单二一","Menu Show 2.1","","","",1,"menushow21.asp");
 mnuShow_2.menu[1] = new menu("mnuShow22","演示菜单二二","Menu Show 2.2","images/i.p.cont.group.gif","","",0,"mnuShow_22");
 mnuShow_2.menu[2] = new menu("mnuShow23","演示菜单二三","Menu Show 2.3","","","",1,"menushow23.asp");
 mnuShow_2.menu[3] = new menu("mnuShow24","演示菜单二四","Menu Show 2.4","","","",1,"mnuShow_22");
 mnuShow_2.menu[4] = new menu("mnuShow25","演示菜单二五","Menu Show 2.5","","","",1,"menushow25.asp");

 drawSubMenu(mnuShow_2);

 var mnuShow_22 = new CMenu("mnuShow_22");
 mnuShow_22.menu[0] = new menu("mnuShow221","演示菜单二二一","Menu Show 2.2.1","images/i.p.search.gif","","",1,"menushow221.asp");
 mnuShow_22.menu[1] = new menu("mnuShow222","演示菜单二二二","Menu Show 2.2.2","images/i.p.putinfolder.gif","","",0,"mnushow_222");
 mnuShow_22.menu[2] = new menu("mnuShow223","演示菜单二二三","Menu Show 2.2.3","images/i.p.folder.sent.gif","","",1,"menushow223.asp");

 drawSubMenu(mnuShow_22);

 var mnuShow_222 = new CMenu("mnuShow_222");
 mnuShow_222.menu[0] = new menu("mnuShow2221","演示菜单二二二一","Menu Show 2.2.2.1","","","",1,"menushow2221.asp");
 mnuShow_222.menu[1] = new menu("mnuShow2222","演示菜单二二二二","Menu Show 2.2.2.2","","","",1,"menushow2222.asp");
 mnuShow_222.menu[2] = new menu("mnuShow2223","演示菜单二二二三","Menu Show 2.2.2.3","images/i.p.junkmail.gif","","",1,"menushow2223.asp");

 drawSubMenu(mnuShow_222);
//-->
</SCRIPT>
</p>
</BODY>
</HTML>