JS+CSS相对定位实现的下拉菜单

JS+CSS相对定位实现的下拉菜单是网页制作中比较常用的一种效果，它可以让页面菜单更加美观、实用。下面是它的完整攻略。

第一步：HTML布局

首先，需要定义一个下拉菜单触发器和下拉菜单的容器，代码如下：

<div class="dropdown">
  <button class="dropdown-trigger">下拉菜单</button>
  <div class="dropdown-menu">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

其中，.dropdown是下拉菜单容器的类名，.dropdown-trigger是触发下拉菜单的按钮的类名，.dropdown-menu是下拉菜单的类名，里面的<a>标签是下拉菜单中的选项。

第二步：CSS样式

接下来，需要给这个下拉菜单容器和相应的元素设置 CSS 样式，让它显示出效果，代码如下：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: none;
}

.dropdown-menu a {
  display: block;
  padding: 8px 20px;
}

其中，.dropdown 和 .dropdown-menu 的 position 都是 relative 和 absolute，表示相对定位和绝对定位。.dropdown 的 display 是 inline-block，让按钮和下拉菜单在同一行，并且具有块级元素的样式表现。.dropdown-menu 的 top 和 left 表示下拉菜单的位置，z-index 表示在堆叠层叠区域内的元素显示层的层级，display 表示下拉菜单不可见，等待 JS 控制。

第三步：JS脚本

最后，通过 js 控制触发器，使点击之后下拉菜单显示或隐藏。代码如下：

const dropdownTrigger = document.querySelector('.dropdown-trigger');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownTrigger.addEventListener('click', function() {
    dropdownMenu.style.display = dropdownMenu.style.display === 'none' ? 'block' : 'none';
});

其中，通过 querySelector 方法获取到触发器和下拉菜单容器的元素对象。使用 addEventListener 方法监听触发器的点击事件，点击时如果下拉菜单不可见，设置 display 为 block，下拉菜单就会显示出来。

示例说明

接下来，我们通过两个简单的示例，说明如何使用 JS+CSS 实现下拉菜单效果。

示例一：普通下拉菜单

HTML 布局：

<div class="dropdown">
  <button class="dropdown-trigger">菜单</button>
  <div class="dropdown-menu">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

CSS 样式：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: none;
}

.dropdown-menu a {
  display: block;
  padding: 8px 20px;
}

JS 脚本：

const dropdownTrigger = document.querySelector('.dropdown-trigger');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownTrigger.addEventListener('click', function() {
    dropdownMenu.style.display = dropdownMenu.style.display === 'none' ? 'block' : 'none';
});

在浏览器中打开这个页面，点击菜单按钮可以看到下拉菜单的弹出和隐藏。

示例二：多级下拉菜单

对于多级下拉菜单，只需要在菜单选项中再嵌套一个下拉菜单容器即可，代码如下：

<div class="dropdown">
  <button class="dropdown-trigger">菜单</button>
  <div class="dropdown-menu">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <div class="dropdown">
      <a href="#">选项3</a>
      <div class="dropdown-menu">
        <a href="#">子选项1</a>
        <a href="#">子选项2</a>
        <a href="#">子选项3</a>
      </div>
    </div>
    <a href="#">选项4</a>
  </div>
</div>

在 CSS 样式和 JS 脚本中不需要做太多的改变，只需要把新添加的 .dropdown 和 .dropdown-menu 节点加入 CSS 样式中，并且在 JS 脚本中修改触发器和下拉菜单容器的选择器即可。

这就是使用 JS+CSS 相对定位实现的下拉菜单的完整攻略。