一个简单的仿xp的js下拉菜单 (转)

于 2007-08-16 19:41:35 发布
阅读量97 收藏
点赞数
一个简单的仿xp的js下拉菜单 (转)[@more@]

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

menu.htm（菜单主文件）

 


 Noteless Valley(lijun.org)程序示例
 microsoft Visual Studio .NET 7.0">
 IE5">http://schemas.microsoft.com/intellisense/ie5">
 
 
 
 
 
 
 
 
 
此部分已经被顶部菜单条覆盖

 

信息提示区域


 

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 = "

"
 document.write (strHTML);
 
 posLeft = 2;
 posTop = 1;
 for (i=0;i strHTML = "
 "οnmοuseοver='return menu_onmouseover(this,"" + menu.bar[i].cmd + "")' οnmοuseοut='return menu_onmouseout(this)' " +
 "οnclick='return menu_onclick(this,"" + menu.bar[i].cmd + "")' title='" + menu.bar[i].tip + "'>" + menu.bar[i].text;
 if (menu.bar[i].key!="") {
 strHTML += "( " + menu.bar[i].key + ")";
 }
 strHTML += "
";
 document.write (strHTML);
 posLeft += document.all.item(menu.bar[i].name).offsetWidth + 1;
 }
 
 strHTML = "
";
 document.write (strHTML);
 }
 
 //输出一个已定义的子菜单，竖排的
 function popSubMenu(menu) {
 
 var strHTML, posLeft, posTop, i;
 
 strHTML = "
"
 document.write (strHTML);
 
 posLeft = 1;
 posTop = 1;
 
 for (i=0;i if (menu.bar[i].name!="-") { //如果名称不是“-”，表示是一个普通菜单条
 strHTML = "
 "title='" + menu.bar[i].tip + "' " +
 "οnmοuseοver='return bar_onmouseover(this," + menu.bar[i].type + ","" + menu.bar[i].cmd + "")' " +
 "οnmοuseοut='return bar_onmouseout(this," + menu.bar[i].type + ","" + menu.bar[i].cmd + "")' " +
 "οnclick='return bar_onclick(this," + menu.bar[i].type + ","" + menu.bar[i].cmd + "")'>" +
 " 
";
 if (menu.bar[i].ico!="") {
 strHTML += "%22%20+%20menu.bar%5Bi%5D.ico%20+%20%22";
 }else {
 strHTML += " ";
 }
 strHTML += "		" + menu.bar[i].text;
 if (menu.bar[i].key!="") { strHTML = strHTML + "(" + menu.bar[i].key + ")"; }
 strHTML += "		";
 if (menu.bar[i].skey!="") {
 strHTML += menu.bar[i].skey;
 }else {
 strHTML += " ";
 }
 strHTML += "  		";
 if (menu.bar[i].type==0) {
 strHTML += "→";
 }else {
 strHTML += "  ";
 }
 strHTML += "
" +
 "
";
 document.write (strHTML);
 posTop += document.all.item(menu.bar[i].name).offsetHeight;
 }else { //如果名称是“-”，表示是一条分隔线
 strHTML = "
" +
 " 
" +
 " 
" +
 " 
" +
 "
";
 document.write (strHTML);
 posTop += 3;
 }
 }
 
 strHTML = "
"
 document.write (strHTML);
 document.all.item(menu.name).style.height = posTop+3; //重设子菜单背景框
 }


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

 function showMenu(menu,submenu) { //显示一级子菜单
 document.all.item(submenu).style.left = menu.parentElement.offsetLeft + menu.offsetLeft + 1; //设置子菜单位置
 document.all.item(submenu).style.top = menu.parentElement.offsetTop + menu.offsetTop + menu.offsetHeight -1; //设置子菜单的位置
 document.all.item(submenu).style.visibility = "visible"; //显示子菜单
 mnuPrev[mnuPrev.length] = new menuinfo(submenu,1); //将新打开的子菜单的ID加入当前显示菜单ID数组
 }
 
 function showSubMenu(menu,submenu) { //显示二级及以下子菜单
 document.all.item(submenu).style.left = menu.parentElement.offsetLeft + menu.offsetLeft + menu.offsetWidth + 2; //设置子菜单位置
 document.all.item(submenu).style.top = menu.parentElement.offsetTop + menu.offsetTop + 1; //设置子菜单的位置
 if (document.all.item(submenu).offsetLeft + document.all.item(submenu).offsetWidth > doc_width) {
 document.all.item(submenu).style.left = menu.parentElement.offsetLeft - document.all.item(submenu).offsetWidth + 1;
 }
 if (document.all.item(submenu).offsetTop + document.all.item(submenu).offsetHeight > doc_height) {
 document.all.item(submenu).style.top = document.all.item(submenu).offsetTop + menu.offsetHeight - document.all.item(submenu).offsetHeight + 2;
 }
 document.all.item(submenu).style.visibility = "visible"; //显示子菜单
 mnuPrev[mnuPrev.length] = new menuinfo(submenu,1); //将新打开的子菜单的ID加入当前显示菜单ID数组
 }
 
 function showstatus() { //测试阶段用的函数，显示当前菜单ID数组内的内容
 lblMsg.innerText = "";
 for(var i=0;i lblMsg.innerText += mnuPrev[i].id + " > ";
 }
 }
 
 function menuinfo(id,type) {
 this.id = id; //0表示菜单项，1表示菜单框
 this.type = type;
 }

 function menu_onmouseover(obj,cmd) {
 if(!mClick) {
 obj.className = "MainMenuOver";
 mnuPrev[mnuPrev.length] = new menuinfo(obj.id,0); //将当前的菜单ID压入当前菜单ID数组
 //showstatus(); //调试阶段使用
 }else {
 if (mnuPrev[0].id == obj.id) { return false; } //如果是在本身上移动，不作为
 document.all.item(mnuPrev[0].id).className = "MainMenu";
 for (var i=1;i if (mnuPrev[i].type==0) { //如果是菜单项，设置成默认样式
 document.all.item(mnuPrev[i].id + "_ico").className = "ico";
 document.all.item(mnuPrev[i].id + "_text").className = "text";
 document.all.item(mnuPrev[i].id + "_skey").className = "skey";
 document.all.item(mnuPrev[i].id + "_sub").className = "sub";
 }else { //如果是菜单框，隐藏它
 document.all.item(mnuPrev[i].id).style.visibility = "hidden";
 }
 }
 mnuPrev.length = 0;
 obj.className = "MainMenuClick";
 mnuPrev[mnuPrev.length] = new menuinfo(obj.id,0);
 showMenu(obj,cmd);
 //showstatus(); //调试阶段使用
 }
 }

 function menu_onmouseout(obj) {
 if(!mClick) {
 obj.className = "MainMenu";
 mnuPrev.length --; //清除最后一个压入当前菜单ID数组的菜单ID
 //showstatus(); //调试阶段使用
 }
 }
 
 function menu_onclick(obj,cmd) {
 if(!mClick) { //如果菜单当前状态是非点击状态，证明当前是从非点击状态到点击状态
 obj.className = "MainMenuClick"; //设置当前菜单为鼠标单击之后的状态
 showMenu(obj,cmd); //显示子菜单
 //showstatus(); //调试阶段使用
 mClick = true; //设置菜单当前是点击状态
 }else {
 obj.className = "MainMenuOver"; //设置当前菜单为鼠标移动上面的状态，非点击状态
 document.all.item(mnuPrev[mnuPrev.length-1].id).style.visibility = "hidden";
 mnuPrev.length --;
 //showstatus(); //调试阶段使用
 mClick = false; //主菜单当前是非点击状态
 }
 bMenuClick = true; //在一个菜单上单击后设置其状态为true,用来屏蔽document_click事件
 }

 function bar_onmouseover(obj,type,cmd) {
 for (var i=1;i if(mnuPrev[i].id==obj.parentElement.id) {
 for (var j=i+1;j if (mnuPrev[j].type==0) { //如果是菜单项，设置成默认样式
 document.all.item(mnuPrev[j].id + "_ico").className = "ico";
 document.all.item(mnuPrev[j].id + "_text").className = "text";
 document.all.item(mnuPrev[j].id + "_skey").className = "skey";
 document.all.item(mnuPrev[j].id + "_sub").className = "sub";
 }else { //如果是菜单框，隐藏它
 document.all.item(mnuPrev[j].id).style.visibility = "hidden";
 }
 }
 mnuPrev.length = i + 1;
 break;
 }
 }
 mnuPrev[mnuPrev.length] = new menuinfo(obj.id,0);
 //showstatus(); //调试阶段使用
 document.all.item(obj.id + "_ico").className = "icoOver";
 document.all.item(obj.id + "_text").className = "textOver";
 document.all.item(obj.id + "_skey").className = "skeyOver";
 document.all.item(obj.id + "_sub").className = "subOver";
 if (type==0) { showSubMenu(obj,cmd); } //如果有下一级菜单就展开
 //showstatus(); //调试阶段使用
 }
 
 function bar_onmouseout(obj,type,cmd) {
 if (type!=0) {
 document.all.item(obj.id + "_ico").className = "ico";
 document.all.item(obj.id + "_text").className = "text";
 document.all.item(obj.id + "_skey").className = "skey";
 document.all.item(obj.id + "_sub").className = "sub";
 if (mnuPrev.length>0) {
 mnuPrev.length --;
 }
 
 //showstatus(); //调试阶段使用
 }
 }

 function bar_onclick(obj,type,cmd) {
 if (type==1) {
 //window.navigate(cmd); //跳转到相应的文件
 lblOutput.innerText = cmd; //演示期间，将文件名显示出来
 }else {
 bMenuClick = true; //在一个菜单上单击后设置其状态为true,用来屏蔽document_click事件
 }
 }


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

 var doc_width; //当前窗口的宽度，随窗口大小改变而改变
 var doc_height; //当前窗口的高度，随窗口大小改变而改变
 
 var mClick = false; //一级菜单是否被点击，初始一级菜单是未被点击状态
 var bMenuClick = false; //单击是否是在一个菜单上，初始单击不是在一个菜单上
 var mnuPrev = new Array(); //当前显示的菜单ID数组，初始为空

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

 function document_onclick() {
 if(!bMenuClick) {
 if (mnuPrev.length>0) {
 for (var i=1;i if (mnuPrev[i].type==0) { //如果是菜单项，设置成默认样式
 document.all.item(mnuPrev[i].id + "_ico").className = "ico";
 document.all.item(mnuPrev[i].id + "_text").className = "text";
 document.all.item(mnuPrev[i].id + "_skey").className = "skey";
 document.all.item(mnuPrev[i].id + "_sub").className = "sub";
 }else { //如果是菜单框，隐藏它
 document.all.item(mnuPrev[i].id).style.visibility = "hidden";
 }
 }
 document.all.item(mnuPrev[0].id).className = "MainMenu"; //将主菜单的状态恢复普通状态
 }
 mnuPrev.length = 0; //清空当前显示菜单
 mClick = false; //清除菜单点击状态
 }else {
 bMenuClick = false;
 }
 }

 function window_onresize() {
 //当窗口尺寸变化时改变相应变量的值
 doc_height = window.document.body.offsetHeight;
 doc_width = window.document.body.offsetWidth;
 }

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

//--&gt


来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/10752043/viewspace-962528/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/10752043/viewspace-962528/

csd3176
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值