转自《A pure CSS onclick context menu》
二货翻译：范小饭

Context menus are one of those very useful UI widgets that still haven’t reached the HTML spec. There have been attempts, but for now everyone tends to make its own custom implementation.

上下文菜单是哪个没有达到HTML规范的非常有用的ui部件之一，这是一些尝试，但是现在每个人走在自定义实现。

Especially with the advent of React, the tendency is to write a custom menu component that uses JavaScript to open/close itself, perhaps by using an invisible overlay to detect clicks outside the menu and close it accordingly. This works fine in practice, however it doesn’t have to be so complicated. If you need a simple dropdown menu that:
1、Has no dependencies;
2、Can be triggered with a click/tap on any element;
3、Is fully cross-browser;
4、Doesn’t need JavaScript!
Then look no further. It’s much simpler than you think!

特别是随着react的到来，写一个上下文菜单组件，用JavaScript控制它的打开和关闭已经是一个趋势了，获取通过不可见的覆盖发现点击在菜单外来相应的关闭菜单，在实践中效果很好，并且不复杂，如果你需要一个简单的下拉菜单满足以下条件

1、无需任何依赖
2、可以通过点击任意元素触发
3、完全跨浏览器
4、不需要js

那就不要再看了，比你想象中简单。

An example

This is done in pure HTML and CSS; the JavaScript is there just to add functionality. Source code below.

这个是纯html，css写的，js在这里就是添加了一个方法。代码如下

The HTML

<button>☰</button>
<nav class="menu">
  <ul>
    <li>
      <button onclick="alert('Hello there!')">
        Display Greeting
      </button>
    </li>
    <li>
      <button onclick="print()">
        Print This Page
      </button>
    </li>
  </ul>
</nav>

The CSS

.menu {
    visibility: hidden;
}

button + .menu:active,
button:focus + .menu {
    visibility: visible;
}

That’s the trick: we hide the menu in CSS initially, then show it when the button gets focused and while we’re clicking on the menu itself. This is necessary so that the click actually gets registered. That’s it! No JS trickery involved.

You can attach event listeners to the menu items, e.g. using onclick or document.addEventListenerand they’ll work as usual.

Obviously the menu can be opened only by elements that can receive focus, such as buttons. So what about other non-interactive elements? Can we make them focusable too? The answer is yes!

这就是诀窍：在初始时将菜单隐藏在css中，然后在按钮聚焦时显示它，同时单击菜单本身，这是非常必要的以便于点击注册单击事件，就是这样，不涉及js

你可以将事件监听附加到菜单项，例如onclick或者document.addEventListener，他们也可以正常工作

显然，这个菜单只能由能够接受聚焦焦点的元素打开，例如按钮，那么其他的非交互元素呢？我们能够让他们也聚焦吗？答案是yes

A more complicated example

We want to display a context menu when clicking on the following image:
当我们想点击如下图片时显示上下文菜单

HTML

<figure tabindex="-1">
  <img src="/images/doge.png" />

  <nav class="menu">
    <ul>
      <li>
        <button>Open Image in New Tab</button>
      </li>
      <li>
        <button>Save Image As...</button>
      </li>
      <li>
        <button>Copy Image Address</button>
      </li>
    </ul>
  </nav>
</figure>

CSS

.menu {
visibility: hidden;
}

figure:active .menu,
figure:focus .menu {
visibility: visible;
}

The trick here was to add tabindex. This makes the element focusable, so that it can open the menu on click. Note that if the clickable element is a <button> or other interactive content (i.e. any focusable element), then you don’t even need this!

I’ve used a <figure>, but you can use any element you like. Just add tabindex="-1" to make it focusable, if it isn’t already. You can place the menu anywhere you want in the HTML, as long as you’re able to target it with a CSS selector. Just try not to put a button in a button as that’s invalid HTML, although technically it will still work.

这个秘诀就是添加 tabindex，可以让元素可以聚焦，所以当点击菜单时能够打开，注意，如果过是可点击元素是button或者其他可交互内容，你不需要tabindex

How do I make the menu appear next to the mouse cursor?

You’ll need JavaScript, but it’s entirely up to you whether you want to do this. Alternatively you could add position: absolute to the menu and just make it appear below (or next to) the element you clicked — no need for JS in this case! Anyway, this did the trick for me:

如何使菜单显示在鼠标光标旁边？
你需要使用js,但这完全取决于你是否想要这么做,你可以通过添加定位替代：定位这个菜单出现在你点击元素的下面（旁边），这种不需要js，不论怎么样，这种对我比较好。

const img = document.querySelector('.doge');
const menu = document.querySelector('.menu');

img.addEventListener('mousedown', ({ offsetX, offsetY }) => {
    menu.style.top = offsetY + 'px';
    menu.style.left = offsetX + 'px';
});

What about browser support?

It may not work in some very old browsers, so make sure to test it in the browsers you need to support. This MDN page has some info about what happens to the focus of a button when being clicked/tapped on different platforms. I did some tests myself and it seems to work well everywhere, including mobile browsers.

And that’s it! I hope you found this useful. If you spot any issues, please do let me know by commenting below!

浏览器支持怎么样？
在一些老的浏览器中它可能不会生效，所以在你需要支持的浏览器中做好充足的测试，This MDN page有一些信息关于在不同的平台上点击一个按钮会发生什么，我自己做了一些测试，它看起来在哪里运行的都非常好，包括移动端浏览器。

就这样！希望你觉得这个有用。如果您发现任何问题，请在下面的评论中让我知道。