纯 CSS 响应式水平滚动菜单布局

本文介绍了一种基于纯 CSS 的响应式水平滚动菜单布局。这种布局可以让您轻松创建水平滚动菜单，无需任何 JavaScript。

实现思路

实现这种布局的核心思路是通过 flexbox 和 overflow 属性来实现滚动菜单的效果。具体而言，可以使用一个 flex 容器来包含所有的菜单项，然后通过 overflow-x 属性将超出容器宽度的内容隐藏。最后，通过前进和后退按钮来控制菜单项的显示位置。

代码实现

以下是实现这种布局的代码：

<div class="menu-container">
  <div class="menu-wrapper">
    <div class="menu">
      <a href="#">菜单项 1</a>
      <a href="#">菜单项 2</a>
      <a href="#">菜单项 3</a>
      <!-- 更多菜单项 -->
    </div>
  </div>
  <button class="prev-btn">&#x276E;</button>
  <button class="next-btn">&#x276F;</button>
</div>

<style>
  .menu-container {
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .menu-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
  }

  .menu {
    display: flex;
  }

  .menu a {
    padding: 1rem;
    margin-right: 1rem;
    white-space: nowrap;
  }

  .prev-btn,
  .next-btn {
    background: transparent;
    border: none;
    font-size: 2rem;
    padding: 0 1rem;
    cursor: pointer;
  }

  .prev-btn:hover,
  .next-btn:hover {
    color: #ccc;
  }

  .prev-btn {
    transform: scaleX(-1);
    margin-right: auto;
  }

  @media (max-width: 768px) {
    .menu a {
      font-size: 1.5rem;
      padding: 0.5rem;
      margin-right: 0.5rem;
    }
  }
</style>

在上面的代码中，我们首先创建了一个容器 .menu-container 包含三个元素：菜单容器 .menu-wrapper、前进按钮 .prev-btn 和后退按钮 .next-btn。菜单容器包含所有的菜单项，通过 overflow-x: auto 属性实现横向滚动效果。

为了让菜单项横向排列，我们将菜单容器的子元素 .menu 设置为 display: flex。每个菜单项都是一个链接（<a>），通过 white-space: nowrap 属性让它们在同一行显示。

为了让菜单项看起来舒适，我们使用了一些 CSS 样式来设置外观（如 padding、margin-right 和 font-size）。我们还使用了一些鼠标悬停样式，使按钮在鼠标悬停时变成灰色。

最后，我们使用媒体查询 @media 来适应不同的设备宽度。在小屏幕上，我们减少了菜单项的字号和间距，使菜单看起来更加紧凑。

总结

本文介绍了一种基于纯 CSS 的响应式水平滚动菜单布局。通过这种布局，您可以轻松创建具有横向滚动效果的菜单，无需任何 JavaScript。如果您想要在自己的网站上使用这种布局，只需将上面的代码复制到您的 HTML 文件中即可。