一个简单的仿xp的js下拉菜单
一个简单的仿xp的js下拉菜单
?
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
DIV.SubMenu TD
{
font-size: 14px;
padding-top: 2px;
}
xp_menu.js（.js包含文件）
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="http://www.chinaitpower.com/A/2003-09-13/" + 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="http://www.chinaitpower.com/A/2003-09-13/" + 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 += " }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; } //-->
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！