右键菜单_var msie = navigator.useragent.indexof('msie')?tru-优快云博客

本文链接：https://blog.youkuaiyun.com/yangzhanghui/article/details/6518662

<html>
<head>
<style type="text/css">
body{
  font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
  margin-left:0px;
}
#contextMenu{ /* The menu container */
  border:1px solid #202867; /* Border around the entire menu */
  background-color:#FFF; /* White background color of the menu */
  margin:0px;
  padding:0px;
  width:175px; /* Width of context menu */
  font-family:arial;
  font-size:12px;
  background-image:url('images/gradient.gif');
  background-repeat:repeat-y;

  /* Never change these two values */
  display:none;
  position:absolute;

}
#contextMenu a{ /* Links in the context menu */
  color: #000;
  text-decoration:none;
  line-height:25px;
  vertical-align:middle;
  height:28px;

  /* Don't change these 3 values */
  display:block;
  width:100%;
  clear:both;

}
#contextMenu li{ /* Each menu item */
  list-style-type:none;
  padding:1px;
  margin:1px;
  cursor:pointer;
  clear:both;
}
#contextMenu li div{ /* Dynamically created divs */
  cursor:pointer;
}
#contextMenu .contextMenuHighlighted{ /* Highlighted context menu item */
  border:1px solid #000;
  padding:0px;
  background-color:#E2EBED;

}
#contextMenu img{
  border:0px;
}
#contextMenu .imageBox{ /* Dynamically created divs for images in the menu */

  float:left;
  padding-left:2px;
  padding-top:3px;
  vertical-align:middle;

  width: 30px; /* IE 5.x */
  width/* */:/**/28px; /* Other browsers */
  width: /**/28px;
}
#contextMenu .itemTxt{
  float:left;
  width: 120px; /* IE 5.x */
  width/* */:/**/140px; /* Other browsers */
  width: /**/140px;
}
</style>
<script type="text/javascript">

/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/

var contextMenuObj;
var MSIE = navigator.userAgent.indexOf('MSIE')?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (/d/./d).*/g,'$1')/1;
var activeContextMenuItem = false;
function highlightContextMenuItem()
{
  this.className='contextMenuHighlighted';
}

function deHighlightContextMenuItem()
{
  this.className='';
}

function showContextMenu(e)
{
   contextMenuSource = this;
   if(activeContextMenuItem)activeContextMenuItem.className='';
   if(document.all)e = event;
   var xPos = e.clientX;
   if(xPos + contextMenuObj.offsetWidth > (document.documentElement.offsetWidth-20)){
    xPos = xPos + (document.documentElement.offsetWidth - (xPos + contextMenuObj.offsetWidth)) - 20;
   }

   var yPos = e.clientY;
   if(window.document.body.scrollTop > 0)
     {
       yPos = (window.screen.Height) ? e.clientY + window.document.body.scrollTop -20 : e.clientY -20;
     }
     else if (window.pageYOffset)
     {
       yPos = (window.pageYOffset > 0) ? e.clientY + window.pageYOffset -20 : e.clientY -20;
     }
     else
     { yPos = e.clientY -20; }
   /* * */
   contextMenuObj.style.left = xPos + 'px';
   contextMenuObj.style.top = yPos + 'px';
   contextMenuObj.style.display='block';
   return false;
}

</script>
</head>
<body>

   <div align="center">点击鼠标右键看效果</center>
   <ul id="contextMenu">
<li><a href="http://www.sharejs.com"><img src="images/button.gif">Home</a></li>
<li><a href="#" οnclick="document.getElementById('htmlSource').style.display='block';return false">View HTML</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
   </ul>
   <script type="text/javascript">
     initContextMenu();
   </script>

</body>
</html>

这个上下文关联右键菜单是基于<ul>无序列表创建的，所以在网页里定制右键菜单只需要通过纯HTML代码即可，大大简化了用户操作.范例如下:
<ul id="contextMenu">
<li><a href="http://www.sharejs.com">
<img src="images/button.gif">Home</a></li>
<li><a href="#" οnclick="jsFunction();return false">
View HTML</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
</ul>

注意，UL的ID必须为 "contextMenu"

你可以通过"initContextMenu"函数来初始化菜单.如:
<script type="text/javascript">
initContextMenu();
</script>

将上面这段代码放在 <UL><LI> 后面

要修改菜单的样式，可以直接修改CSS

将上面这段代码放在 <UL><LI> 后面

要修改菜单的样式，可以直接修改CSS

本文来源：http://www.sharejs.com/showdetails-459.aspx