javascript pop menu-代码示例

温馨提示：这篇文章已超过287天没有更新，请注意相关的内容是否还可用！

JavaScript pop menu（弹出菜单）是一种常见的网页交互效果，它通常用于在用户点击或悬停在某个元素上时，弹出一个菜单供用户选择操作。实现这个效果的关键是使用JavaScript来控制菜单的显示和隐藏。

我们需要创建一个HTML元素作为菜单的容器，并使用CSS样式将其隐藏起来。然后，通过JavaScript来监听触发菜单显示的事件，比如点击或悬停在某个元素上。当事件触发时，我们可以通过改变菜单容器的CSS样式来显示菜单，以及设置菜单的位置。

下面是一个简单的示例代码，演示了如何实现一个基本的JavaScript pop menu效果：

HTML部分：


<button id="menuTrigger">点击弹出菜单</button>
<div id="menuContainer">
  <ul>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

CSS部分：


#menuContainer {
  display: none; /* 初始状态隐藏菜单 */
  position: absolute; /* 绝对定位，方便设置菜单位置 */
  background-color: #fff; /* 背景颜色 */
  border: 1px solid #ccc; /* 边框样式 */
  padding: 10px; /* 内边距 */
}
#menuContainer ul {
  list-style: none; /* 去除默认的列表样式 */
  margin: 0;
  padding: 0;
}
#menuContainer ul li {
  padding: 5px 10px; /* 选项的内边距 */
  cursor: pointer; /* 鼠标悬停时显示手型指针 */
}
#menuContainer ul li:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
}

JavaScript部分：


// 获取菜单容器和触发菜单显示的按钮
var menuContainer = document.getElementById("menuContainer");
var menuTrigger = document.getElementById("menuTrigger");
// 监听按钮的点击事件
menuTrigger.addEventListener("click", function() {
  // 切换菜单的显示和隐藏状态
  if (menuContainer.style.display === "none") {
    menuContainer.style.display = "block";
  } else {
    menuContainer.style.display = "none";
  }
});
// 监听菜单容器外的点击事件，用于隐藏菜单
document.addEventListener("click", function(event) {
  // 判断点击的是否是菜单容器内的元素
  if (!menuContainer.contains(event.target) && event.target !== menuTrigger) {
    menuContainer.style.display = "none";
  }
});