在网页设计和交互体验中，左键弹出式菜单无疑是一个令人眼前一亮的功能，它能够为用户提供便捷的操作选项，提升用户体验，就让我们深入探究如何用 JS 代码来实现这一炫酷的功能。

想象一下，当您在浏览一个网页时，轻轻点击鼠标左键，一个精心设计的弹出式菜单就展现在您眼前，是不是感觉特别方便和有趣？

要实现左键弹出式菜单，我们首先需要准备好 HTML 结构，比如说，我们可以创建一个简单的按钮元素，作为触发弹出菜单的起点。

<button id="menuButton">点击弹出菜单</button>

就是关键的 JS 代码部分了，我们需要为按钮添加一个点击事件监听器，当左键点击时触发相应的操作。

document.getElementById("menuButton").addEventListener("click", function(event) {
  if (event.button === 0) {  // 判断是否为左键点击
    // 在这里实现弹出菜单的逻辑
    // 比如创建一个包含菜单选项的 div 元素，并设置其样式和显示位置
    var menuDiv = document.createElement("div");
    menuDiv.innerHTML = "<ul><li>选项 1</li><li>选项 2</li><li>选项 3</li></ul>";
    menuDiv.style.position = "absolute";
    menuDiv.style.left = event.clientX + "px";
    menuDiv.style.top = event.clientY + "px";
    document.body.appendChild(menuDiv);
  }
});

在上述代码中，我们通过判断点击事件的按钮是否为左键，来决定是否执行弹出菜单的操作，当左键点击时，创建一个包含菜单选项的div 元素，并通过设置其样式来确定显示的位置。

为了让弹出式菜单更加美观和实用，我们还可以为菜单添加样式，比如背景颜色、字体样式、边框等等。

div {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 10px;
  list-style-type: none;
  margin: 0;
  cursor: pointer;
}
div li {
  padding: 5px 0;
}
div li:hover {
  background-color: #e9ecef;
}

这样，一个基本的左键弹出式菜单就实现了，但这只是一个简单的示例，您可以根据实际需求进一步扩展和优化菜单的功能。

您可以添加菜单选项的点击事件处理，实现不同的操作，或者根据页面布局和用户交互需求，调整菜单的显示位置和样式。

让我们来玩一个小游戏，加深对左键弹出式菜单的理解。

游戏名称：“菜单寻宝”

游戏玩法：

在一个虚构的网页上，分布着多个左键弹出式菜单，每个菜单中都隐藏着一个宝物图标，您需要通过左键点击不同的按钮，找出所有的宝物图标。

操作方式：

1、用鼠标左键点击网页上的按钮，弹出菜单。

2、在菜单中寻找宝物图标。

3、找到宝物图标后，点击它进行记录。

4、继续寻找其他菜单中的宝物图标，直到全部找到。

问答：

1、如何在弹出式菜单中添加子菜单？

2、怎样实现左键弹出式菜单的动画效果？

3、如何确保弹出式菜单在不同屏幕尺寸下的显示效果？