仿xp下拉菜单
2007-12-08 15:52:02 来源：WEB开发网 闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹
闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘ｅ亾妤犵偛顦甸弫鎾绘偐閹绘帞鈧參姊哄Ч鍥х仼闁诲繑鑹鹃悾鐑藉蓟閵夛妇鍘甸梺瑙勵問閸犳牠銆傛總鍛婄厱閹艰揪绱曟牎闂侀潧娲ょ€氫即鐛幒妤€绠ｆ繝闈涘暙娴滈箖鏌ｉ姀鈶跺湱澹曟繝姘厵闁绘劦鍓氶悘杈ㄤ繆閹绘帞澧涚紒缁樼洴瀹曞崬螖閸愬啠鍓濈换娑樼暆婵犱胶鏁栫紓浣介哺閹瑰洤鐣烽幒鎴僵闁瑰吀鐒﹂悗鎼佹⒒娴ｇ儤鍤€闁搞倖鐗犻獮蹇涙晸閿燂拷
濠电姷鏁告慨鐑藉极閸涘﹥鍙忔い鎾卞灩缁狀垶鏌涢幇闈涙灈鐎瑰憡绻冮妵鍕箻鐎靛摜鐣奸梺纭咁潐濞茬喎顫忕紒妯肩懝闁逞屽墮宀ｈ儻顦查悡銈夋煏閸繃鍋繛宸簻鎯熼梺瀹犳〃閼冲爼宕濋敃鈧—鍐Χ閸℃鐟愰梺鐓庡暱閻栧ジ宕烘繝鍥у嵆闁靛骏绱曢崢顏堟⒑閹肩偛鍔楅柡鍛⊕缁傛帟顦寸紒杈ㄥ笚濞煎繘鍩℃担閿嬵潟闂備浇妗ㄩ悞锕傚箲閸ヮ剙鏋侀柟鍓х帛閺呮悂鏌ㄩ悤鍌涘闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹 闂傚倸鍊搁崐鎼佸磹閻戣姤鍤勯柤鍝ユ暩娴犳氨绱撻崒娆掑厡缂侇噮鍨堕妴鍐川閺夋垹鍘洪悗骞垮劚椤︻垶宕￠幎鑺ョ厪闊洦娲栨牎闂佽瀵掗崜鐔奉潖閾忓湱纾兼俊顖氭惈椤矂姊虹拠鑼婵ǜ鍔戦崺鈧い鎺嶇閸ゎ剟鏌涢幘璺烘瀻妞ゎ偄绻愮叅妞ゅ繐瀚悗顓烆渻閵堝棙绀€闁瑰啿閰ｅ畷婊勫鐎涙ǚ鎷洪梻渚囧亞閸嬫盯鎳熼娑欐珷妞ゆ柨澧界壕鐓庮熆鐠虹尨鍔熺紒澶庢閳ь剚顔栭崰鏍€﹂柨瀣╃箚婵繂鐭堝Σ鐑芥⒑缁嬫鍎愰柟鐟版搐铻為柛鎰╁妷濡插牊绻涢崱妤冪婵炲牊锕㈠缁樻媴妞嬪簼瑕嗙紓鍌氱М閸嬫挻绻涚€涙ḿ鐭ら柛鎾跺枛瀹曟椽鍩€椤掍降浜滈柟鐑樺灥閳ь剙缍婂鎶筋敆閸曨剛鍘遍柣搴秵娴滅兘鐓鍌楀亾鐟欏嫭纾婚柛妤€鍟块锝夊磹閻曚焦鞋闂備礁鎼Λ瀵哥不閹捐钃熼柕濞炬櫆閸嬪棝鏌涚仦鍓р槈妞ゅ骏鎷�
用JS实现一个简单的仿xp下拉菜单，贴出来，希望对其它人有用，有兴趣的朋友可以对快捷键功能进行扩展，目前留有接口，但未实现。
menu.htm（菜单主文件）
<html>
<head>
<title>Noteless Valley(lijun.org)程序示例</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>
<!--
return document_onselectstart()
//-->
</script>
<script language=javascript for=document event=onclick>
<!--
return document_onclick()
//-->
</script>
</head>
<body scroll=no language=javascript onresize=return window_onresize() onload=return window_onload()>
<script language=javascript>
<!--
//定义一个主菜单对象
var mnuMain = new menu(mnuMain);
mnuMain.bar[0] = new menu_bar(mnuMainNL,,无名谷,,Noteless Valley,,0,mnuNL);
mnuMain.bar[1] = new menu_bar(mnuMainSiteAdmin,,网站管理,,网站管理,,0,mnuSiteAdmin);
mnuMain.bar[2] = new menu_bar(mnuMainSystem,,系统管理,,系统管理,,0,mnuSystem);
mnuMain.bar[3] = new menu_bar(mnuMainShow,,演示菜单,,Menu Show,,0,mnuShow);
popMainMenu(mnuMain,0,0,100%,27); //激活主菜单，通过参数确定主菜单的位置
var mnuNL = new menu(mnuNL);
mnuNL.bar[0] = new menu_bar(mnuHomePage,,首页,,HomePage,,1,http://lijun.org);
mnuNL.bar[1] = new menu_bar(mnuDesign,,网页设计,,Design,,1,http://lijun.org/article.asp?topic=1);
mnuNL.bar[2] = new menu_bar(mnuProgram,,网络编程,,Program,,1,http://lijun.org/article.asp?topic=2);
mnuNL.bar[3] = new menu_bar(mnuOthers,,其它文章,,Others,,1,http://lijun.org/article.asp?topic=3);
popSubMenu(mnuNL);
var mnuSiteAdmin = new menu(mnuSiteAdmin)
mnuSiteAdmin.bar[0] = new menu_bar(mnuAddressUpdate,,访问地区更新,,访问地区更新,,1,AddressUpdate.asp);
popSubMenu(mnuSiteAdmin);
var mnuSystem = new menu(mnuSystem);
mnuSystem.bar[0] = new menu_bar(mnuSysUser,,用户管理,,用户管理,,1,userAdmin.asp);
mnuSystem.bar[1] = new menu_bar(mnuSysAuthority,,权限管理,,权限管理,,1,authority.asp);
mnuSystem.bar[2] = new menu_bar(\-,,,,,,,);
mnuSystem.bar[3] = new menu_bar(mnuSysPwdChange,,口令修改,,口令修改,,1,chgpwd.asp);
mnuSystem.bar[4] = new menu_bar(\-,,,,,,,);
mnuSystem.bar[5] = new menu_bar(mnuSysHelp,,帮助,,帮助,,1,help.asp);
mnuSystem.bar[6] = new menu_bar(mnuSysAbout,,关于本系统,,关于本系统,,1,about.asp);
mnuSystem.bar[7] = new menu_bar(\-,,,,,,,);
mnuSystem.bar[8] = new menu_bar(mnuSysExit,,退出系统,,退出本系统,,1,quit.asp);
popSubMenu(mnuSystem);
var mnuShow = new menu(mnuShow);
mnuShow.bar[0] = new menu_bar(mnuShow1,,演示菜单一,,Menu Show 1,,1,menushow1.asp);
mnuShow.bar[1] = new menu_bar(mnuShow2,,演示菜单二,,Menu Show 2,,0,mnuShow_2);
mnuShow.bar[2] = new menu_bar(mnuShow3,,演示菜单三,,Menu Show 3,,1,menushow3.asp);
mnuShow.bar[3] = new menu_bar(\-,,,,,,,);
mnuShow.bar[4] = new menu_bar(mnuShow4,,演示菜单四,,Menu Show 4,,1,menushow4.asp);
mnuShow.bar[5] = new menu_bar(mnuShow5,,演示菜单五,,Menu Show 5,,0,mnuShow_2);
popSubMenu(mnuShow);
var mnuShow_2 = new menu(mnuShow_2);
mnuShow_2.bar[0] = new menu_bar(mnuShow21,,演示菜单二一,,Menu Show 2.1,,1,menushow21.asp);
mnuShow_2.bar[1] = new menu_bar(mnuShow22,,演示菜单二二,,Menu Show 2.2,,0,mnuShow_22);
mnuShow_2.bar[2] = new menu_bar(mnuShow23,,演示菜单二三,,Menu Show 2.3,,1,menushow23.asp);
mnuShow_2.bar[3] = new menu_bar(mnuShow24,,演示菜单二四,,Menu Show 2.4,,0,mnuShow_22);
mnuShow_2.bar[4] = new menu_bar(mnuShow25,,演示菜单二五,,Menu Show 2.5,,1,menushow25.asp);
popSubMenu(mnuShow_2);
var mnuShow_22 = new menu(mnuShow_22);
mnuShow_22.bar[0] = new menu_bar(mnuShow221,,演示菜单二二一,,Menu Show 2.2.1,,1,menushow221.asp);
mnuShow_22.bar[1] = new menu_bar(mnuShow222,,演示菜单二二二,,Menu Show 2.2.2,,1,menushow222.asp);
mnuShow_22.bar[2] = new menu_bar(mnuShow223,,演示菜单二二三,,Menu Show 2.2.3,,1,menushow223.asp);
popSubMenu(mnuShow_22);
//-->
</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 {
&n
技术交流 永无止境
中查找“仿xp下拉菜单”更多相关内容
中查找“仿xp下拉菜单”更多相关内容更多精彩
赞助商链接
