CSS实现下拉菜单,点击下拉区域以外的区域关闭菜单

一、需求

需求大概如下:
点击按钮,弹出下拉菜单;点击下拉菜单以外的区域,隐藏菜单。
实现效果如下,可以在线体验:CSS实现下拉菜单

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

¥ 赞赏