js右键菜单
来源：(http://blog.sina.com.cn/s/blog_4b6fd829010009h3.html) - JS右键下拉菜单[转载]_lebron_新浪博客
将以下代码添加到<head>与</head>之间
----------------------------------
代码:
<script language='javascript'>
/*******以下内容可以修改***************/
var mname=new Array(
"首 页",
"修 改",
"下 载",
"删 除",
"新 建",
"刷 新"
);
//mname是菜单对应的名称，数组的个数必须与下面murl对应
var murl=new Array(
"window.open('http://www.cn5.cn','_blank','');",
"alert('修改');",
"alert('download');",
"alert('delete');",
"alert('new');",
"alert('refresh');"
);
//murl是菜单对应的操作，可以是任意javascript代码但是要注意不要在里面输入\"，只能用'
//如果要实现跳转可以这样window.location='url';
var ph=18,mwidth=50;//每条选项的高度,菜单的总宽度
var bgc="#eee",txc="black";//菜单没有选中的背景色和文字色
var cbgc="darkblue",ctxc="white";//菜单选中的选项背景色和文字色
/****************以下代码请不要修改******************/
var mover="this.style.background='"+cbgc+"';this.style.color='"+ctxc+"';"
var mout="this.style.background='"+bgc+"';this.style.color='"+txc+"';"
document.oncontextmenu=function()
{
mlay.style.display="";
mlay.style.pixelTop=event.clientY;
mlay.style.pixelLeft=event.clientX;
return false;
}
function showoff()
{
mlay.style.display="none";
}
function fresh()
{
mlay.style.background=bgc;
mlay.style.color=txc;
mlay.style.width=mwidth;
mlay.style.height=mname.length*ph;
var h="<table width=100% height="+mname.length*ph+"px cellpadding=0 cellspacing=0 border=0>";
var i=0;
for(i=0;i<mname.length;i++)
{
h+="<tr align=center height="+ph+" onclick=\""+murl[i]+"\" onMouseover=\""+mover+"\" onMouseout=\""+mout+"\"><td style='font-size:9pt;'>"+mname[i]+"</td></tr>";
}
h+="</table>";
mlay.innerHTML=h;
}
</script>
----------------------------------
将以下代码替换<body>标签
----------------------------------
代码:
<body onClick="showoff();" onload="fresh();">
----------------------------------
在<body>与</body>之间插入以下代码
----------------------------------
代码:
<div id="mlay" style="position:absolute;display:none;cursor:default;" onClick="return false;"></div>
分享到：
相关推荐
总结起来，"Bootstrap鼠标右键下拉菜单特效"是一个创新的交互设计，它利用Bootstrap的灵活性和JavaScript的动态特性，为用户提供了方便的右键操作方式。通过理解和应用这个特效，开发者可以增强网页的交互性，提升...
Bootstrap鼠标右键下拉菜单特效是一种常见的网页交互设计，它利用JavaScript和Bootstrap框架来实现用户在鼠标右键点击时出现的下拉菜单。这个压缩包文件包含了一个完整的示例，帮助开发者了解如何在自己的项目中集成...
jQuery右键点击下拉菜单插件是Web开发中一种便捷的交互增强工具，它利用了流行的Bootstrap框架中的下拉菜单组件。Bootstrap是一个广泛使用的前端框架，提供了丰富的UI组件，包括响应式的布局、导航条、模态框等，而...
vue自定义右键菜单 -vue2版 vue自定义右键菜单 js右键菜单
在JavaScript编程中，模拟窗口（WINDOW）的右键弹出下拉菜单是一项常见的需求，尤其在Web应用中，为了提供类似桌面应用的交互体验。这个技术主要涉及到HTML、CSS和JavaScript，尤其是jQuery库中的插件——jQuery ...
1. JavaScript代码：这部分代码会监听鼠标的contextmenu事件（即右键点击事件），并阻止浏览器的默认右键菜单显示。然后，根据需求动态创建自定义的菜单元素，并将其定位在鼠标点击的位置。 2. HTML结构：菜单的每...
在触发右键下拉菜单的时候，直接阻止掉浏览器的默认事件，就实现了该效果。 以上这篇js阻止默认右键的下拉菜单方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
【jQuery css3仿游戏网站右键环形菜单代码】是一个技术实现方案，旨在创建一个与游戏网站风格类似的右键点击菜单。这个菜单采用jQuery库和CSS3技术，以实现动态、交互性强的效果，为用户提供更加丰富的操作体验。...
总结来说，这款"非常实用的js全屏右键菜单插件"利用jQuery的便捷性，实现了全屏范围内的右键菜单，支持多级结构，提供了丰富的定制选项，是提升网页交互体验的有效工具。对于开发者而言，理解和掌握这款插件的使用，...
在构建右键菜单时，我们将主要利用其下拉菜单（dropdown）组件。下拉菜单是Bootstrap的一个内置功能，它可以轻松创建下拉列表，非常适合用于构建右键菜单。 接下来，我们需要一个表格来触发右键菜单。Bootstrap的...
总的来说，"jQuery右键点击指定区域下拉菜单代码.zip"是一个实用的开发资源，它利用jQuery和可能的Bootstrap框架，为开发者提供了一种快速构建自定义右键下拉菜单的方法。通过学习和理解这个代码，开发者可以提升...
以上代码将创建一个基本的右键下拉菜单。为了增强功能，可以添加更多的自定义选项，如动态生成菜单项、异步加载数据、菜单项的事件处理等。此外，还可以根据需求调整Bootstrap的样式，以适应网页的整体设计风格。 ...
// 实现菜单的显示逻辑，例如使用Bootstrap的下拉菜单 } // 节点操作函数 function addNode() { // 添加节点的逻辑 } function deleteNode() { // 删除节点的逻辑 } // 使用刚指定的配置项和数据显示图表 ...
总结来说，这个"JS的无限极PopUP右键菜单美化版"项目展示了如何利用JavaScript和CSS来创建一个交互性强、视觉效果佳的多级菜单系统，提高了用户的网页浏览体验。通过学习和研究这个项目，开发者可以提升自己在前端...
这些元素通常会以弹出框或者下拉菜单的形式出现，用户可以选择其中的项来执行相应的操作。例如，我们可以创建一个包含多个选项的菜单： ```javascript function showCustomMenu(x, y) { var menu = document....
Bootstrap鼠标右键菜单代码是基于流行的前端框架Bootstrap和JavaScript实现的一种交互式功能，它允许用户在网页上的任何元素上通过鼠标右键点击打开一个自定义的下拉菜单。这种技术通常用于提供额外的操作选项，增强...
样式设置使得菜单看起来更像一个传统的下拉菜单，包括高度、宽度、边框、背景色、内边距以及绝对定位。 ```html 复制 粘贴 运行 工具 帮助 ``` 接下来是CSS部分，主要设置了菜单和列表项的样式，如消除...