如何添加一个自定义右键菜单的网页?

我想添加一个自定义右键菜单到我的web应用程序。这可以在不使用任何预先构建的库的情况下完成吗?如果是这样，如何显示一个简单的自定义右键菜单，不使用第三方JavaScript库?

我的目标是像谷歌Docs做的东西。它允许用户右键单击并显示用户自己的菜单。

注意: 我想学习如何制作我自己的，而不是使用别人已经制作的东西，因为大多数时候，那些第三方库的功能都很臃肿，而我只想要我需要的功能，所以我希望它完全由我手工制作。

当前回答

<html>
<head>
<style>
.rightclick {
    /* YOUR CONTEXTMENU'S CSS */
    visibility: hidden;
    background-color: white;
    border: 1px solid grey;
    width: 200px;
    height: 300px;
}
</style>
</head>
<body>
  <div class="rightclick" id="ya">
    <p onclick="alert('choc-a-late')">I like chocolate</p><br><p onclick="awe-so-me">I AM AWESOME</p>
  </div>
  <p>Right click to get sweet results!</p>
</body>
<script>
    document.onclick = noClick;
    document.oncontextmenu = rightClick;
    function rightClick(e) {
        e = e || window.event;
        e.preventDefault();
        document.getElementById("ya").style.visibility = "visible";
        console.log("Context Menu v1.3.0 by IamGuest opened.");
   }
function noClick() {
    document.getElementById("ya").style.visibility = "hidden";
    console.log("Context Menu v1.3.0 by IamGuest closed.");
}
</script>
<!-- Coded by IamGuest. Thank you for using this code! -->
</html>

您可以调整和修改这段代码，使上下文菜单看起来更美观、更高效。至于修改一个现有的上下文菜单，我不知道如何做到这一点…看看这把小提琴，有组织的观点。另外，试着点击我的上下文菜单中的项目。他们应该提醒你一些很棒的信息。如果它们不起作用，那就试试别的……复杂。

2016-10-03 20:58:18

其他回答

根据这里和其他'流程的答案，我已经制作了一个看起来像谷歌Chrome的版本，带有css3过渡。 JS小提琴

让我们开始简单，因为我们有上面的js在这个页面上，我们可以担心css和布局。我们将使用的布局是一个<a>元素和一个<img>元素或一个字体awesome图标(<i class="fa fa-flag"></i>)和一个<span>来显示键盘快捷键。这就是结构:

<a href="#" onclick="doSomething()">
  <img src="path/to/image.gif" />
  This is a menu option
  <span>Ctrl + K</span>
</a>

我们将把这些放在一个div中，并在右键菜单中显示该div。让我们风格他们像在谷歌Chrome浏览器，好吗?

#menu a {
  display: block;
  color: #555;
  text-decoration: no[...]

现在，我们将从接受的答案中添加代码，并获得游标的X和Y值。为此，我们将使用e.clientX和e. clienti。我们正在使用客户端，所以菜单div必须被修复。

var i = document.getElementById("menu").style;
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.client[...]

And that is it! Just add the css transisions to fade in and out, and done! var i = document.getElementById("menu").style; if (document.addEventListener) { document.addEventListener('contextmenu', function(e) { var posX = e.clientX; var posY = e.clientY; menu(posX, posY); e.preventDefault(); }, false); document.addEventListener('click', function(e) { i.opacity = "0"; setTimeout(function() { i.visibility = "hidden"; }, 501); }, false); } else { document.attachEvent('oncontextmenu', function(e) { var posX = e.clientX; var posY = e.clientY; menu(posX, posY); e.preventDefault(); }); document.attachEvent('onclick', function(e) { i.opacity = "0"; setTimeout(function() { i.visibility = "hidden"; }, 501); }); } function menu(x, y) { i.top = y + "px"; i.left = x + "px"; i.visibility = "visible"; i.opacity = "1"; } body { background: white; font-family: sans-serif; color: #5e5e5e; } #menu { visibility: hidden; opacity: 0; position: fixed; background: #fff; color: #555; font-family: sans-serif; font-size: 11px; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; -webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1); -moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1); box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1); padding: 0px; border: 1px solid #C6C6C6; } #menu a { display: block; color: #555; text-decoration: none; padding: 6px 8px 6px 30px; width: 250px; position: relative; } #menu a img, #menu a i.fa { height: 20px; font-size: 17px; width: 20px; position: absolute; left: 5px; top: 2px; } #menu a span { color: #BCB1B3; float: right; } #menu a:hover { color: #fff; background: #3879D9; } #menu hr { border: 1px solid #EBEBEB; border-bottom: 0; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <h2>CSS3 and JAVASCRIPT custom menu.</h2> <em>Stephan Stanisic | Lisence free</em> <p>Right-click anywhere on this page to open the custom menu. Styled like the Google Chrome contextmenu. And yes, you can use <i class="fa fa-flag"></i>font-awesome</p> <p style="font-size: small"> <b>Lisence</b> <br /> "THE PIZZA-WARE LICENSE" (Revision 42): <br /> You can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a Pizza in return. <br /> <a style="font-size:xx-small" href="https://github.com/KLVN/UrbanDictionary_API#license">https://github.com/KLVN/UrbanDictionary_API#license</a> </p> <br /> <br /> <small>(The white body background is just because I hate the light blue editor background on the result on jsfiddle)</small> <div id="menu"> <a href="#"> <img src="http://puu.sh/nr60s/42df867bf3.png" /> AdBlock Plus <span>Ctrl + ?!</span> </a> <a href="#"> <img src="http://puu.sh/nr5Z6/4360098fc1.png" /> SNTX <span>Ctrl + ?!</span> </a> <hr /> <a href="#"> <i class="fa fa-fort-awesome"></i> Fort Awesome <span>Ctrl + ?!</span> </a> <a href="#"> <i class="fa fa-flag"></i> Font Awesome <span>Ctrl + ?!</span> </a> </div>

2016-03-01 18:20:39

你应该记住，如果你想使用Firefox唯一的解决方案，如果你想把它添加到整个文档，你应该把contextmenu="mymenu"添加到<html>标签，而不是body标签。你应该注意这一点。

2014-10-10 17:45:04

纯JS和css解决方案，一个真正的动态右键单击上下文菜单，尽管基于预定义的命名约定的元素id，链接等。 jsfiddle 你可以复制粘贴到单个静态HTML页面的代码:

2019-01-30 18:05:16

这是一个很好的教程，教你如何用一个完整的工作代码示例(不含JQuery和其他库)构建一个自定义上下文菜单。

你也可以在GitHub上找到他们的演示代码。

他们给出了详细的一步一步的解释，你可以跟着来构建你自己的右键上下文菜单(包括html, css和javascript代码)，并在最后通过给出完整的示例代码来总结它。

您可以轻松地遵循并根据自己的需要进行调整。而且不需要JQuery或其他库。

这是他们的菜单代码示例:

<nav id="context-menu" class="context-menu">
    <ul class="context-menu__items">
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="View"><i class="fa fa-eye"></i> View Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Edit"><i class="fa fa-edit"></i> Edit Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Delete"><i class="fa fa-times"></i> Delete Task</a>
      </li>
    </ul>
  </nav>

一个工作示例(任务列表)可以在codepend上找到。

2016-10-04 06:56:36

对我很有用。为了让像我这样的人，期待绘制菜单，我把我用来制作右键菜单的代码放在这里:

$(document).ready(function() { if ($("#test").addEventListener) { $("#test").addEventListener('contextmenu', function(e) { alert("You've tried to open context menu"); //here you draw your own menu e.preventDefault(); }, false); } else { //document.getElementById("test").attachEvent('oncontextmenu', function() { //$(".test").bind('contextmenu', function() { $('body').on('contextmenu', 'a.test', function() { //alert("contextmenu"+event); document.getElementById("rmenu").className = "show"; document.getElementById("rmenu").style.top = mouseY(event) + 'px'; document.getElementById("rmenu").style.left = mouseX(event) + 'px'; window.event.returnValue = false; }); } }); // this is from another SO post... $(document).bind("click", function(event) { document.getElementById("rmenu").className = "hide"; }); function mouseX(evt) { if (evt.pageX) { return evt.pageX; } else if (evt.clientX) { return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); } else { return null; } } function mouseY(evt) { if (evt.pageY) { return evt.pageY; } else if (evt.clientY) { return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); } else { return null; } } .show { z-index: 1000; position: absolute; background-color: #C0C0C0; border: 1px solid blue; padding: 2px; display: block; margin: 0; list-style-type: none; list-style: none; } .hide { display: none; } .show li { list-style: none; } .show a { border: 0 !important; text-decoration: none; } .show a:hover { text-decoration: underline !important; }  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="contextmenu.js"></script> <link rel="stylesheet" href="contextmenu.css" /> <div id="test1"> <a href="www.google.com" class="test">Google</a> <a href="www.google.com" class="test">Link 2</a> <a href="www.google.com" class="test">Link 3</a> <a href="www.google.com" class="test">Link 4</a> </div>  <div class="hide" id="rmenu"> <ul> <li> <a href="http://www.google.com">Google</a> </li> <li> <a href="http://localhost:8080/login">Localhost</a> </li> <li> <a href="C:\">C</a> </li> </ul> </div>

2013-05-10 11:18:13

如何添加一个自定义右键菜单的网页?

推荐文章

最新文章

标签