仿微软的下拉式菜单(Javascript)

最新推荐文章于 2019-10-16 20:59:33 发布
最新推荐文章于 2019-10-16 20:59:33 发布
阅读量1.8k 收藏
点赞数
分类专栏： WEB设计 文章标签： javascript 微软 function border null command
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/listen/article/details/78243
版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<script language=javascript>
var mmenus = new Array();
var misShow = new Boolean();
misShow=false;
var misdown = new Boolean();
misdown=false;
var msrcel;
var mfromel;
var mtoel;
var musestatus=false;
var mthestatus="";
var mpopTimer = 0;
mmenucolor='#FFFFFF';mfontcolor='#000000';mmenuoutcolor='#009AFF';
mmenuincolor='#009AFF';mmenuoutbordercolor='#009AFF';mmenuinbordercolor='#009AFF';
mmidoutcolor='#0099FF';mmidincolor='#0099FF';mmenuovercolor='#FF0000';mitemedge='0';
msubedge='1';
mmenuunitwidth=60;
mmenuitemwidth=160;
mmenuheight=22;
mmenuwidth='500';
mmenuadjust=10;
mmenuadjustV=0;
mfonts='font-family: Arial; font-size: 9pt; color: #000000; ';
mcursor='default';

function stoperror()
{
 return true;
}

window.οnerrοr=stoperror;

function mpopOut() {
 mpopTimer = setTimeout('mallhide()', 500);
}
function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY"))
 {
  if (eval("temp." + type) == value) {
   el = temp;
   return el;
  }
  temp = temp.parentElement;
 }
 return el;
}


function mMenuRegister(menu)
{
 mmenus[mmenus.length] = menu
 return (mmenus.length - 1)
}
function mMenuItem(caption,command,target,isline,statustxt,img,sizex,sizey,pos){
 this.caption=caption;
 this.command=command;
 this.target=target;
 this.isline=isline;
 this.statustxt=statustxt;
 this.img=img;
 this.sizex=sizex;
 this.sizey=sizey;
 this.pos=pos;
}
function mMenu(caption,command,target,img,sizex,sizey,pos){
 this.items = new Array();
 this.caption=caption;
 this.command=command;
 this.target=target;
 this.img=img;
 this.sizex=sizex;
 this.sizey=sizey;
 this.pos=pos;
 this.id=mMenuRegister(this);
}
function mMenuAddItem(item)
{
 this.items[this.items.length] = item
 item.parent = this.id;
 this.children=true;
}

mMenu.prototype.addItem = mMenuAddItem;

function mtoout(src){
 src.style.borderLeftColor=mmenuoutbordercolor;
 src.style.borderRightColor=mmenuinbordercolor;
 src.style.borderTopColor=mmenuoutbordercolor;
 src.style.borderBottomColor=mmenuinbordercolor;
 src.style.backgroundColor=mmenuoutcolor;
 src.style.color=mmenuovercolor;
}
function mtoin(src){
 src.style.borderLeftColor=mmenuinbordercolor;
 src.style.borderRightColor=mmenuoutbordercolor;
 src.style.borderTopColor=mmenuinbordercolor;
 src.style.borderBottomColor=mmenuoutbordercolor;
 src.style.backgroundColor=mmenuincolor;
 src.style.color=mmenuovercolor;
}
function mnochange(src){
 src.style.borderLeftColor=mmenucolor;
 src.style.borderRightColor=mmenucolor;
 src.style.borderTopColor=mmenucolor;
 src.style.borderBottomColor=mmenucolor;
 src.style.backgroundColor='';
 src.style.color=mfontcolor;
}
function mallhide(){
 for(var nummenu=0;nummenu<mmenus.length;nummenu++)
 {
  var themenu=document.all['mMenu'+nummenu]
  var themenudiv=document.all['mmenudiv'+nummenu]
  mnochange(themenu);
  mmenuhide(themenudiv);
 }
}
function mmenuhide(menuid){
 menuid.style.filter='Alpha(Opacity=100)';
 menuid.style.visibility='hidden';
 misShow=false;
}
function mmenushow(menuid,pid){
 menuid.style.filter='Alpha(Opacity=80)';
 menuid.style.left=mposflag.offsetLeft+pid.offsetLeft+mmenuadjust;
 menuid.style.top=mposflag.offsetTop+mmenutable.offsetHeight+mmenuadjustV+1;
 if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth)
  menuid.style.left=document.body.clientWidth-mmenuitemwidth;
 menuid.style.visibility='visible';
 misShow=true;
}
function mmenu_over(menuid,x){
 mtoel = getReal(window.event.toElement, "className", "coolButton");
 mfromel = getReal(window.event.fromElement, "className", "coolButton");
 if (mtoel == mfromel)
  return;
 msrcel = window.event.srcElement;
 if(x<0){
  misShow = false;
  mallhide();
  mtoout(msrcel);
 }else{
  mallhide();
  mtoin(msrcel);
  mmenushow(menuid,eval("mMenu"+x));
 }
 clearTimeout(mpopTimer);
}
function mmenu_out(menuid){
 mtoel = getReal(window.event.toElement, "className", "coolButton");
 mfromel = getReal(window.event.fromElement, "className", "coolButton");
 if (mtoel == mfromel)
  return;
 msrcel = window.event.srcElement;
 if (misShow){
  mtoin(msrcel);
 }else{
  mnochange(msrcel);
 }
 mpopOut()
}
function mmenu_down(menuid,x){
 msrcel = getReal(window.event.srcElement, "className", "coolButton");
 if(misShow){
  mmenuhide(menuid);
  mtoout(msrcel);
 }
 else{
  mtoin(msrcel);
  mmenushow(menuid,eval("mMenu"+x));
  misdown=true;
 }
}
function mmenu_up(){
 misdown=false;
}
function mmenuitem_over(menuid){
 msrcel = getReal(window.event.srcElement, "className", "coolButton");
 if(misdown){
  mtoin(msrcel);
 }
 else{
  mtoout(msrcel);
 }
 if(mthestatus!=""){
  musestatus=true;
  window.status=mthestatus;
 }
 clearTimeout(mpopTimer);
}
function mmenuitem_out(menuid){
 msrcel = getReal(window.event.srcElement, "className", "coolButton");
 mnochange(msrcel);
 if(musestatus)window.status="";
  mpopOut()
}
function mmenuitem_down(menuid){
 msrcel = getReal(window.event.srcElement, "className", "coolButton");
 mtoin(msrcel)
 misdown=true;
}
function mmenuitem_up(menuid){
 msrcel = getReal(window.event.srcElement, "className", "coolButton");
 mtoout(msrcel)
 misdown=false;
}
function mexec2(x){
 var cmd;
 if(mmenus[x].target=="blank"){
  cmd = "window.open('"+mmenus[x].command+"')";
 }else{
  cmd = mmenus[x].target+".location='"+mmenus[x].command+"'";
 }
 eval(cmd);
}
function mexec(x,i){
 var cmd;
 if(mmenus[x].items[i].target=="blank"){
  cmd = "window.open('"+mmenus[x].items[i].command+"')";
 }else{
  cmd = mmenus[x].items[i].target+".location='"+mmenus[x].items[i].command+"'";
 }
 eval(cmd);
}
function mbody_click(){
 if (misShow)
 {
  msrcel = getReal(window.event.srcElement, "className", "coolButton");
  for(var x=0;x<=mmenus.length;x++)
  {
   if(msrcel.id=="mMenu"+x)
    return;
  }
  mallhide();
 }
}

document.οnclick=mbody_click;
var mMenuBodyRef;


function mwritetodocument()
{
 var mwb=1;
 for(var i in document.all)
 {
  if (document.all[i].tagName == 'BODY')
  {
   mMenuBodyRef = document.all[i]
   var stringx='<div id="mposflag" style="position:absolute;"></div><table border=1 cellpand=0 cellspacing=0 width=1004 bgcolor='+mmenucolor+' style="filter:Alpha(Opacity=80);cursor:'+mcursor+';'+mfonts+
   ' border-left: '+mwb+'px solid '+mmenuoutbordercolor+';'+
   ' border-right: '+mwb+'px solid '+mmenuinbordercolor+'; '+
   'border-top: '+mwb+'px solid '+mmenuoutbordercolor+'; '+
   'border-bottom: '+mwb+'px solid '+mmenuinbordercolor+'; padding:0px"><tr><td>'

   stringx+='<table id=mmenutable border=0 cellpadding=0 cellspacing=0 width='+mmenuwidth+' height='+mmenuheight+' bgcolor='+mmenucolor+
   ' onselectstart="event.returnValue=false"'+
   ' style="filter:Alpha(Opacity=80);cursor:'+mcursor+';'+mfonts
   //' border-left: '+mwb+'px solid '+mmenuoutbordercolor+';'+
   //' border-right: '+mwb+'px solid '+mmenuinbordercolor+'; '+
   //'border-top: '+mwb+'px solid '+mmenuoutbordercolor+'; '+
   //'border-bottom: '+mwb+'px solid '+mmenuinbordercolor+'; '
   stringx+='padding:0px"><tr>'
   for(var x=0;x<mmenus.length;x++)
   {
    var thismenu=mmenus[x];
    var imgsize;
    if(thismenu.sizex=="0"&&thismenu.sizey=="0")
    {
     imgsize="";
    }
    else
    {
     imgsize=" width="+thismenu.sizex+" height="+thismenu.sizey;
    }
    var ifspace;
    if(thismenu.caption=="")
    {
     ifspace="";
    }else{
     ifspace=" ";
    }
    stringx += "<td class=coolButton id=mMenu"+x+" style='border: "+mitemedge+"px solid "+mmenucolor+
    "' width="+mmenuunitwidth+"px οnmοuseοver=mmenu_over(mmenudiv"+x+
    ","+x+") οnmοuseοut=mmenu_out(mmenudiv"+x+
    ") οnmοusedοwn=mmenu_down(mmenudiv"+x+","+x+")";
    if(thismenu.command!=""){
     stringx += " οnmοuseup=mexec2("+x+");mmenu_up();";
    }else{
     stringx += " οnmοuseup=mmenu_up()";
    }
    if(thismenu.pos=="0"){
     stringx += " align=center><img align=absmiddle src="+thismenu.img+imgsize+">"+ifspace+thismenu.caption+"</td>";
    }else if(thismenu.pos=="1"){
     stringx += " align=center>"+thismenu.caption+ifspace+"<img align=absmiddle src="+thismenu.img+imgsize+"></td>";
    }else if(thismenu.pos=="2"){
     stringx += " align=center background="+thismenu.img+">"+thismenu.caption+"</td>";
    }else{
     stringx += " align=center>"+thismenu.caption+"</td>";
    }
    stringx += "";
   }
   stringx+="<td width=*> </td></tr></table>";


   for(var x=0;x<mmenus.length;x++)
   {
    thismenu=mmenus[x];
    if(x<0){
     stringx+='<div id=mmenudiv'+x+' style="visiable:none"></div>';
    }else{
     stringx+='<div id=mmenudiv'+x+
     ' style="filter:Alpha(Opacity=80);cursor:'+mcursor+';position:absolute;'+
     'width:'+mmenuitemwidth+'px; z-index:'+(x+100);
     if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0")
     {
      stringx+=';border-left: 1px solid '+mmidoutcolor+
      ';border-top: 1px solid '+mmidoutcolor;}
      stringx+=';border-right: 1px solid '+mmenuinbordercolor+
      ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">/n'+
      '<table width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+
      'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor;
      if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0")
      {
       stringx+=';border-right: 1px solid '+mmidincolor+';border-bottom: 1px solid '+mmidincolor;
      }
      stringx+=';border-top: 1px solid '+mmenuoutbordercolor+';padding: 4px" bgcolor='+mmenucolor+'>/n'
      for(var i=0;i<thismenu.items.length;i++)
      {
       var thismenuitem=thismenu.items[i];
       var imgsize;
       if(thismenuitem.sizex=="0"&&thismenuitem.sizey=="0")
       {
        imgsize=""
       }else{
        imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey
       }
       var ifspace;
       if(thismenu.caption==""){
        ifspace="";
       }else{
        ifspace=" ";
       }
       if(!thismenuitem.isline)
       {
        stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+"' width=100% height=15px οnmοuseοver=/"mthestatus='"+thismenuitem.statustxt+"';mmenuitem_over(mmenudiv"+x+");/" οnmοuseοut=mmenuitem_out(mmenudiv"+x+") οnmοusedοwn=mmenuitem_down(mmenudiv"+x+") οnmοuseup=";
        stringx += "mexec("+x+","+i+");mmenuitem_up(mmenudiv"+x+") ";
        if(thismenuitem.pos=="0")
        {
         stringx += "><img align=absmiddle src="+thismenuitem.img+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>";
        }else if(thismenuitem.pos=="1"){
         stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src="+thismenuitem.img+imgsize+"></td></tr>";
        }else if(thismenuitem.pos=="2"){
         stringx += "background="+thismenuitem.img+">"+thismenuitem.caption+"</td></tr>";
        }else{
         stringx += ">"+thismenuitem.caption+"</td></tr>";
        }
       }else{
        stringx+='<tr><td height="1" background="hr.gif"><img border="0" src="none.gif" width="1" height="1"></td></tr>/n';
       }
      }
      stringx+='</table></td></tr></table>/n</div>'
     }
   }
   document.write("<div align='left'>"+stringx+"</div>");
   break
  }
 }
}


function document_load(){
 mwritetodocument();
}
mpmenu1=new mMenu('File','','self','','','','');
mpmenu1.addItem(new mMenuItem('New File','javascript:alert("New File")','self',false,'New File','','','',''));
mpmenu1.addItem(new mMenuItem('Open','javascript:alert("Open")','self',false,'Open','','','',''));
mpmenu1.addItem(new mMenuItem('Save','javascript:alert("Save")','self',false,'Save','','','',''));
mpmenu1.addItem(new mMenuItem(null,null,null,true));
mpmenu1.addItem(new mMenuItem('Exit','javascript:alert("Exit")','self',false,'Exit','','','',''));
mpmenu2=new mMenu('Edit','','self','','','','');
mpmenu2.addItem(new mMenuItem('Undo','javascript:alert("Undo")','self',false,'Undo','','','',''));
mpmenu2.addItem(new mMenuItem('ReUndo','javascript:alert("ReUndo")','self',false,'ReUndo','','','',''));
mpmenu2.addItem(new mMenuItem(null,null,null,true));
mpmenu2.addItem(new mMenuItem('Copy','javascript:alert("Copy")','self',false,'Copy','','','',''));
mpmenu3=new mMenu('History','','self','','','','');
mpmenu3.addItem(new mMenuItem('My WebSite','http://www.tuqiu.com','blank',false,'My WebSite','','','',''));
mpmenu3.addItem(new mMenuItem('Yahoo','http://www.yahoo.com','blank',false,'Yahoo','','','',''));
mpmenu4=new mMenu('Help','','self','','','','');
mpmenu4.addItem(new mMenuItem('Content','javascript:alert("Content")','self',false,'Content','','','',''));
mpmenu4.addItem(new mMenuItem('Email','mailto:webmaster@tastelife.net','self',false,'Email','','','',''));
mpmenu4.addItem(new mMenuItem(null,null,null,true));
mpmenu4.addItem(new mMenuItem('About','javascript:alert("About")','self',false,'About','','','',''));

</SCRIPT>
</head>
<body leftmargin=0>
<SCRIPT>document_load()</SCRIPT>
</body>


 

listen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX仿Windows桌面菜单及图标的效果].
03-15
ajaxdesktop[AJAX仿Windows桌面菜单及图标的效果]， ajaxdesktop[AJAX仿Windows桌面菜单及图标的效果].
使用javascript制作一个menu效果
TRy HArD aT aNY TimE
09-25 370
特效介绍: 当鼠标划过某个链接的时候展开一个下拉菜单供选择: 菜单描述: [code] 点评 呵呵 呵呵呵 呵呵呵呵 呵呵呵呵呵 呵呵呵呵呵呵 ...
Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
life is wonderful
01-08 8643
前面几篇博文都在讲导航菜单和二级下拉式菜单，其实有很多方法都可以实现的，具体的情况还要视情况而定。 在后面学习到jQuery框架之后，会有更丰富的动画效果，由于在学习Ajax和jQuery的初步阶段，对于很多的复杂的导 航菜单和二级下拉式菜单没法做，但是学习了CSS和JS还是能实现一些简单的变换的。这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧。        首
web前端入门到实战：html基础—下拉式菜单
软件开发-前端开发-IT
10-16 509
一个网站能否让用户容易使用该网站往往是由菜单栏体现出来，因为它为网页的大多数页面提供功能入口。一个轻轻的点击以后，即可显示出菜单项，将网站的大部分页面和功能显示出来让用户清楚了解从而用户节约一定的时间。接下来我教大家写单击菜单栏中的菜单命令将会出现一个下拉菜单。 1.HTML页面 <div id="nav"> <ul> <li&...
响应式菜单
Wenny
10-27 1522
因公司近期需用到响应式菜单栏，临时做了一个，PC端左侧菜单栏通过css实现，其中移动端有用到jquery.meanmenu.js插件。可能没那么完美，但是基本也勉强够用了，有些功能或者样式可以自己调整。仅供大家和自己参考，有问题请指出。感谢！
JavaScript简单下拉菜单实例代码
10-23
主要介绍了JavaScript简单下拉菜单,采用JavaScript定时函数递归调用实现菜单渐显效果,非常简单实用,需要的朋友可以参考下
JavaScript 下拉菜单实现代码
10-29
利用css+js实现的下拉菜单。通过getElementsByTagName获取ul,隐藏显示。
JavaScript模拟下拉菜单代码
10-30
公司最近一个项目中，出现了一个非window主题外观的下拉菜单，于是自己搞了个。
javascript多级下拉菜单插件
11-19
javascript多级下拉菜单插件 javascript多级下拉菜单插件 javascript多级下拉菜单插件 javascript多级下拉菜单插件 javascript多级下拉菜单插件
unicode编码转换（ASP）
酷狗⊙_⊙刀刀的专栏
08-03 2443
Function fstrChangePrm2Unicode2(ByVal strOrg) Dim strReturn  On Error Resume Next  strReturn = strOrg strReturn = Replace(strReturn, "/" , "/u005C") strReturn = Replace(strReturn, ""  , "/u0027") str
escape+ ANSI转换成Unicode(javascript)
酷狗⊙_⊙刀刀的专栏
09-24 2249
function gfEscapePlus(strOrg) { var moji; var strUni = ""; for(var i=0;i  moji = strOrg.charCodeAt(i);  if(moji    if(moji     strUni = strUni + "%0" + moji.toString(16);   } else if(moji >= 48 && m
ASP控制图片显示的大小（等比例缩放）
酷狗⊙_⊙刀刀的专栏
10-11 2072
New Document var flag=false; function DrawImage(ImgD){  var image=new Image();  image.src=ImgD.src;  if(image.width>0 && image.height>0){   flag=true;   if(image.width/image.height>= 164/112){    if
[javascript]判断email地址的有效性
酷狗⊙_⊙刀刀的专栏
09-11 1867
function isEmailFormatValid(emailSrc) { var email = emailSrc.Trim(); if (email == ) {  return false; }  var regex = //w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*/;  if (regex.test(email)) {   var str
用纯ASP实现完美的WEB柱状图
酷狗⊙_⊙刀刀的专栏
07-22 1740
用纯ASP实现完美的WEB柱状图 dim total(7,2) total(1,1)=200 total(2,1)=800 total(3,1)=1000 total(4,1)=600 total(5,1)=1222 total(6,1)=3213 total(7,1)=8 total(1,2)="中国经营报" total(2,2)="招聘网" total(3,2)="51Job" total(4
半角字符检查（javascript）
酷狗⊙_⊙刀刀的专栏
09-24 1714
//==========================================================//功能：半角字符检查//==========================================================function gfIs1Byte(character) { for (var i = 0; i   if (escape(cha
网页编程相关
酷狗⊙_⊙刀刀的专栏
06-15 1688
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcElement.releaseCapture();  事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.r
下拉式菜单
最新发布
05-24
下拉式菜单是一种常见的网页设计元素，通常用于展示多个选项供用户选择。当用户点击菜单项时，会展开一个下拉列表，显示更多的选项。下拉式菜单可以用 HTML、CSS 和 JavaScript 来实现。 HTML 中，可以使用 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值