纯 CSS 可滚动水平菜单介绍

在前端开发中，我们经常会用到各种菜单样式，其中水平菜单也是比较常见的一种。而在一些情况下，我们需要实现可滚动的水平菜单来展示更多的选项，这时候就可以借助 CSS 来实现。下面将介绍如何通过 CSS 来创建一个纯 CSS 可滚动水平菜单。

实现步骤

1. HTML 结构

首先，我们需要创建一个基本的 HTML 结构。这里我们使用 ul 元素来作为菜单项容器，将每个菜单项使用 li 元素进行包裹。样例代码如下：

<div class="menu-wrap">
  <ul class="menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
    <li><a href="#">菜单项5</a></li>
    <li><a href="#">菜单项6</a></li>
    <li><a href="#">菜单项7</a></li>
    <li><a href="#">菜单项8</a></li>
    <li><a href="#">菜单项9</a></li>
    <li><a href="#">菜单项10</a></li>
  </ul>
</div>

这里我们将 ul 元素封装在 div 标签内，并为其添加一个 menu-wrap 类。同时，为 ul 元素添加 menu 类。

2. CSS 样式

接下来，我们需要编写 CSS 样式来实现滚动效果。

首先，我们需要为菜单容器 menu 设置宽度，并将其内部的 li 元素横向排列，并且取消默认的列表样式。同时，为了让菜单项横向排列，我们还需要将 a 元素的样式设置为块级元素。

.menu-wrap {
  overflow: hidden;
}

.menu {
  list-style: none;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu li {
  display: inline-block;
  margin-right: 10px;
}

.menu li:last-child {
  margin-right: 0;
}

.menu li a {
  display: block;
}

我们可以看到，这里使用了 CSS 的 overflow-x 属性来实现滚动效果。同时，为了防止滚动条出现，我们给菜单容器添加了 overflow: hidden 样式。

3. 美化样式

最后，我们可以根据具体需求来美化样式。这里我们简单添加了一个背景色和边框效果。

.menu {
  background-color: #f6f6f6;
  border: 1px solid #ddd;
  padding: 10px;
}

.menu li a {
  padding: 5px 10px;
  color: #666;
}

.menu li a:hover {
  color: #333;
  background-color: #f2f2f2;
  text-decoration: none;
}

结语

通过以上几步，我们就可以轻松实现纯 CSS 的可滚动水平菜单。当然，这里只是一个基本的例子，实际应用中可能还需要更多的样式和功能，但是核心的实现原理都是相似的。