HTML+Sass实现HambergurMenu(汉堡包式菜单)

HTML和Sass的结合可以实现汉堡包式菜单，下面是实现的步骤：

步骤1： HTML 结构

<div class="hm-container">
  <button class="hm-btn">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <div class="hm-menu">
    <nav>
      <ul>
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li>
          <a href="#">Menu item 3</a>
          <ul>
            <li><a href="#">Sub-menu item 1</a></li>
            <li><a href="#">Sub-menu item 2</a></li>
            <li><a href="#">Sub-menu item 3</a></li>
          </ul>
        </li>
        <li><a href="#">Menu item 4</a></li>
        <li><a href="#">Menu item 5</a></li>
      </ul>
    </nav>
  </div>
</div>

在这个 HTML 结构中，菜单按钮用一个 <button> 元素包裹，Sass 会对该元素进行编译处理。点击按钮后，显示一个菜单列表，这个列表包含了自定义的多级菜单（第3个菜单项之下有一个子菜单）。

步骤2：利用 Sass 实现样式

使用 Sass 对该结构制作样式，我们可以把汉堡包的三条线转换成水平线，为按钮添加动画效果，并设置滑过菜单项时的背景颜色。

.hm-btn {
  display: block;
  padding: 0;
  width: 50px;
  height: 40px;
  border: none;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  &:focus {
    outline: none;
  }
  span {
    width: 25px;
    height: 2px;
    background-color: #333;
    position: absolute;
    left: 50%;
    top: 50%;
    &:nth-child(1) {
      transform: translate(-50%, -9px);
    }
    &:nth-child(2) {
      transform: translate(-50%, -1px);
    }
    &:nth-child(3) {
      transform: translate(-50%, 7px);
    }
  }
}

.hm-menu {
  display: none;
  background-color: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  nav {
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        margin: 0;
        padding: 0;
        a {
          display: block;
          color: #333;
          text-decoration: none;
          padding: 8px 16px;
          &:hover {
            background-color: #f5f5f5;
          }
        }
        ul {
          display: none;
          position: absolute;
          top: 0;
          left: 100%;
          min-width: 160px;
          background-color: #fff;
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
          li {
            a {
              padding: 6px 12px;
            }
          }
        }
        &:hover {
          ul {
            display: block;
          }
        }
      }
    }
  }
}

.hm-container.active {
  .hm-btn {
    span {
      &:nth-child(1) {
        transform: translate(-50%, -1px) rotate(-45deg);
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:nth-child(3) {
        transform: translate(-50%, 1px) rotate(45deg);
      }
    }
  }
  .hm-menu {
    display: block;
  }
}

在这里，我们使用了一下 Sass 的特性：

• & 符号：该符号是 Sass 的占位符标识，用于引用父元素。
• &:focus、&:nth-child(n)、&:hover 这些伪选择器可以使用 & 符号引用父元素，避免了重复编写标签选择器。
• 属性插值：使用 #{} 将变量或表达式插入到属性中。

此外，在 .hm-container 的 class 属性中，使用了“active”类，用于在按钮被点击时切换菜单项的状态。这个 class 是通过 JavaScript 动态添加的，下面来看看该部分代码：

const btn = document.querySelector('.hm-btn');
const menu = document.querySelector('.hm-menu');
const container = document.querySelector('.hm-container');

btn.addEventListener('click', function(e) {
  e.preventDefault();
  container.classList.toggle('active');
});

点击按钮后，将切换 .hm-container 的 class 属性。这里使用的是 classList.toggle() 方法，如果类名不存在，则添加该类名，否则从元素上移除这个类名。

示例1：实现部分菜单项有图标

我们可以使用 ::before 伪元素来为菜单项添加图标，示例代码如下：

.hm-menu {
  /*…*/
  nav {
    /*…*/
    ul {
      /*…*/
      li {
        /*…*/
        a {
          /*…*/
          &:before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 8px;
            background-image: url("../images/icon.png");
            background-repeat: no-repeat;
            background-size: contain;
            position: relative;
            top: -2px;
          }
        }
        /*…*/
      }
      /*…*/
    }
  }
}

在这里，我们为 ::before 伪元素设定了以下样式：

• content: ""：伪元素默认产生的内容为空。
• display: inline-block：把伪元素变成行内块元素，以便它可以被垂直居中。
• width、height：设置图标的宽度和高度。
• margin-right：为图标留出一段空白，使其与文本之间保持一定的距离。
• background-image：设置图标的图片地址。
• background-repeat：不重复显示。
• background-size：将图标缩放到可适应的大小。
• position：相对定位，为其后续添加 top、left、bottom、right 属性做准备。
• top：用于调整图标的垂直位置。

示例2：实现菜单项有圆角边框

我们可以为菜单项和子菜单添加圆角边框，这也是利用 Sass 处理 CSS 的表现力之一。示例代码如下：

.hm-menu {
  /*…*/
  nav {
    /*…*/
    ul {
      /*…*/
      li {
        /*…*/
        border-radius: 4px;
        &:hover {
          background-color: #f5f5f5;
          border-radius: 4px;
          & > a {
            border-radius: 4px;
          }
        }
        ul {
          /*…*/
          li {
            /*…*/
            border-radius: 4px;
            &:hover > a {
              background-color: #f5f5f5;
              border-radius: 4px;
            }
          }
        }
      }
      /*…*/
    }
  }
}

在这里，我们为菜单项和子菜单都添加了圆角样式。

• border-radius：设置圆角大小。
• & > a：选择子元素 a 标签。
• &:hover > a：选择在鼠标悬停时的 a 子元素。