沐码小站

一、需求

需求：点击按钮，弹出下拉菜单；点击下拉菜单以外的区域，隐藏菜单。

实现效果如下，可以在线体验：CSS实现下拉菜单。

JS实现自然不难，不过很多时候能用CSS实现的话JS的方案就不考虑了，更何况CSS实现更加简单。

二、实现

dom结构如下：

<div class="container" tabIndex=-1>
  <div class="menu-button">菜单按钮</div>
  <div class="menu-list">
    <div class="menu">菜单1</div>
    <div class="menu">菜单2</div>
    <div class="menu">菜单3</div>
    <div class="menu">菜单4</div>
  </div>
</div>

这里使用了属性tabIndex，是为了利用focus伪类，正常状态下隐藏下拉菜单，在元素focus的时候，把下拉菜单显示出来；下拉部分使用绝对定位让它脱离文档流。

CSS实现:

.container {
  position: relative;
  width: 120px;
  margin: 100px auto;
}

// 清除focus时的outline样式
.container:focus {
  outline: none;
}

.menu-list {
  display: none;
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  line-height: 2;
  text-align: center;
  padding: 10px 0;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2)
}

.container:focus .menu-list {
  display: block;
}

.menu-button {
  background: rgba(64, 158, 255);
  color: #fff;
  text-align: center;
  line-height: 2.5;
  border-radius: 4px;
  cursor: pointer;
}

.menu:hover {
  background: #eee;
  cursor: pointer;
  user-selct: none;
  padding: 0 4px;
}

实现很简单，就不一一解释了。

三、其它一些实现方案

1. 如果希望鼠标滑入和滑出来显示下拉菜单，可以使用hover伪类
2. 如果想点击下拉菜单也关闭下拉菜单，则可以在menu-button上使用tabIndex，然后使用兄弟选择器控制下拉菜单显示即可。