不使用图片仿Windows右键菜单

2024-09-05 12:20:13

字体：大中小

来源：转载

供稿：网友

没有使用不使用图片仿Windows右键菜单，这里灵活使用了文鼎字，配合CSS和JS做出了这个和系统右键菜单很相似的东东。

<HTML><HEAD><TITLE>极酷的多级右键菜单</TITLE><META content="text/html; charset=gb2312" http-equiv=Content-Type><STYLE type=text/css>BODY {	FONT-SIZE: 12px;}.info{FONT-SIZE: 14px;color:#FFFFFF;font-family:@Tahoma,@宋体;width:20px}TABLE {	CURSOR: default; FONT-SIZE: 12px; MARGIN: 0px}TR {	HEIGHT: 20px}TR.over {	BACKGROUND-COLOR: #000080; COLOR: #ffffff; CURSOR: default; FONT-SIZE: 12px}TR.out {	BACKGROUND-COLOR: #efefef; COLOR: #000000; FONT-SIZE: 12px}DIV.rm_div {	BACKGROUND-COLOR: #efefef; BORDER-BOTTOM: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; DISPLAY: none; FILTER: Alpha(Opacity='95'); HEIGHT: 0px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; WIDTH: 0px}HR.sperator {	BORDER-BOTTOM: #ffffff 1px inset; BORDER-LEFT: #ffffff 1px inset; BORDER-RIGHT: #ffffff 1px inset; BORDER-TOP: #ffffff 1px inset; WIDTH: 95%}.w2kfont {	FONT-FAMILY: Tahoma; FONT-SIZE: 8pt}</STYLE><SCRIPT language=JScript>/n";    HTMLstr += "/n";    HTMLstr += "/n";    HTMLstr += "<div id='E_rbpm' class='rm_div'>/n";    HTMLstr += "<table width='100%' border='0' cellspacing='0'>/n";    HTMLstr += "<tr><td height='264' width='20' valign='bottom'  bgcolor='#000000' onclick=window.event.cancelBubble=true; class=info>娃海作制";    HTMLstr += "</td><td height='264' width='120' style='padding: 1' valign='bottom'>/n";    HTMLstr += "<table width='100%' border='0' cellspacing='0'>/n";    HTMLstr += "/n";    HTMLstr += "</table></td></tr></table>/n";    HTMLstr += "</div>/n";    HTMLstr += "";    HTMLstr += "/n";    HTMLstr += "/n";  }  function AddExtendMenu(id,img,wh,name,parent)  {    var TempStr = "";    eval("A_"+parent+".length++");    eval("A_"+parent+"[A_"+parent+".length-1] = id");	TempStr += "<div id='E_"+id+"' class='rm_div'>/n";    TempStr += "<table width='100%' border='0' cellspacing='0'>/n";    TempStr += "";    TempStr += "</table>/n";    TempStr += "</div>/n";    TempStr += "";    TempStr += "";    HTMLstr = HTMLstr.replace("",TempStr);        eval("A_"+id+" = new Array()");    TempStr  = "";    TempStr += "/n";    TempStr += "<tr id='P_"+id+"' class='out'";    TempStr += " onmouseover='P_OnMouseOver(/""+id+"/",/""+parent+"/")'";    TempStr += " onmouseout='P_OnMouseOut(/""+id+"/",/""+parent+"/")'";    TempStr += " onmouseup=window.event.cancelBubble=true;";    TempStr += " onclick=window.event.cancelBubble=true;";    TempStr += "><td nowrap>";    TempStr += "<font face='Wingdings' style='font-size:18px'>0</font> "+name+"  </td><td style='font-family: webdings; text-align: ;'>4";    TempStr += "</td></tr>/n";    TempStr += "";    HTMLstr = HTMLstr.replace("",TempStr);  }  function AddItem(id,img,wh,name,parent,location)  {    var TempStr = "";    var ItemStr = "";    if(id == "sperator")    {      TempStr += ItemStr+"/n";      TempStr += "<tr class='out' onclick='window.event.cancelBubble=true;' onmouseup='window.event.cancelBubble=true;'><td colspan='2' height='1'><hr class='sperator'></td></tr>";      TempStr += "";      HTMLstr = HTMLstr.replace("",TempStr);      return;    }    if(HTMLstr.indexOf(ItemStr) != -1)    {      alert("I_"+id+"already exist!");      return;    }    TempStr += ItemStr+"/n";    TempStr += "<tr id='I_"+id+"' class='out'";    TempStr += " onmouseover='I_OnMouseOver(/""+id+"/",/""+parent+"/")'";    TempStr += " onmouseout='I_OnMouseOut(/""+id+"/")'";    TempStr += " onclick='window.event.cancelBubble=true;'";    if(location == null)      TempStr += " onmouseup='I_OnMouseUp(/""+id+"/",/""+parent+"/",null)'";    else      TempStr += " onmouseup='I_OnMouseUp(/""+id+"/",/""+parent+"/",/""+location+"/")'";    TempStr += "><td nowrap>";    TempStr +="<font face='Wingdings' style='font-size:18px'>"+wh+"</font> "+ name+" ";//    TempStr += "</td><td></td></tr>/n";    TempStr += "";    HTMLstr = HTMLstr.replace("",TempStr);  }  function GetMenu()  {    return HTMLstr;  }  function I_OnMouseOver(id,parent)  {    var Item;    if(parent != "rbpm")    {      var ParentItem;      ParentItem = eval("P_"+parent);      ParentItem.className="over";    }    Item = eval("I_"+id);    Item.className="over";    HideAll(parent,1);  }  function I_OnMouseOut(id)  {    var Item;    Item = eval("I_"+id);    Item.className="out";  }  function I_OnMouseUp(id,parent,location)  {    var ParentMenu;    window.event.cancelBubble=true;    OnClick();    ParentMenu = eval("E_"+parent);    ParentMenu.display="none";    if(location == null)      eval("Do_"+id+"()");    else      window.open(location);  }  function P_OnMouseOver(id,parent)  {    var Item;    var Extend;    var Parent;    if(parent != "rbpm")    {      var ParentItem;      ParentItem = eval("P_"+parent);      ParentItem.className="over";    }    HideAll(parent,1);    Item = eval("P_"+id);    Extend = eval("E_"+id);    Parent = eval("E_"+parent);    Item.className="over";    Extend.style.display="block";    Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth-4;    if(Extend.style.posLeft+Extend.offsetWidth > document.body.scrollLeft+document.body.clientWidth)        Extend.style.posLeft=Extend.style.posLeft-Parent.offsetWidth-Extend.offsetWidth+8;    if(Extend.style.posLeft < 0) Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth;    Extend.style.posTop=Parent.offsetTop+Item.offsetTop+1;    if(Extend.style.posTop+Extend.offsetHeight > document.body.scrollTop+document.body.clientHeight)      Extend.style.posTop=document.body.scrollTop+document.body.clientHeight-Extend.offsetHeight;    if(Extend.style.posTop < 0) Extend.style.posTop=0;  }  function P_OnMouseOut(id,parent)  {  }  function HideAll(id,flag)  {    var Area;    var Temp;    var i;    if(!flag)    {      Temp = eval("E_"+id);      Temp.style.display="none";    }    Area = eval("A_"+id);    if(Area.length)    {      for(i=0; i < Area.length; i++)      {        HideAll(Area[i],0);        Temp = eval("E_"+Area[i]);        Temp.style.display="none";        Temp = eval("P_"+Area[i]);        Temp.className="out";      }    }  }  document.onmouseup=OnMouseUp;  document.onclick=OnClick;  function OnMouseUp()  {    if(window.event.button == 2)    {      var PopMenu;      PopMenu = eval("E_rbpm");      HideAll("rbpm",0);      PopMenu.style.display="block";      PopMenu.style.posLeft=document.body.scrollLeft+window.event.clientX;      PopMenu.style.posTop=document.body.scrollTop+window.event.clientY;      if(PopMenu.style.posLeft+PopMenu.offsetWidth > document.body.scrollLeft+document.body.clientWidth)        PopMenu.style.posLeft=document.body.scrollLeft+document.body.clientWidth-PopMenu.offsetWidth;      if(PopMenu.style.posLeft < 0) PopMenu.style.posLeft=0;      if(PopMenu.style.posTop+PopMenu.offsetHeight > document.body.scrollTop+document.body.clientHeight)        PopMenu.style.posTop=document.body.scrollTop+document.body.clientHeight-PopMenu.offsetHeight;      if(PopMenu.style.posTop < 0) PopMenu.style.posTop=0;    }  }  function OnClick()  {    HideAll("rbpm",0);  }  // Add Your Function on following  function Do_viewcode(){window.location="view-source:"+window.location.href;}  function Do_help(){window.showHelp(window.location);}  function Do_exit() {window.close();}  function Do_refresh() {window.location.reload();}  function Do_back() {history.back();}  function Do_forward() {history.forward();}function Do_help(){alert("帮助")}  -->  </SCRIPT><META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD><BODY bgColor=#336699 oncontextmenu=window.event.returnValue=false><DIV id=snwcwt> 请点击右键</DIV><SCRIPT language=JScript>  </SCRIPT></TD></TR></TABLE></BODY></HTML>

上一篇：CSS+Js竖向简洁的折叠菜单

下一篇：简单漂亮的导航条