使用HTML和CSS创建滑动菜单效果

翻滚的胖子
2023-06-09 11:47:37
前端技术
HTML CSS

在本文中，我们将学习如何使用HTML和CSS创建一个滑动菜单效果。为了让大家更好地理解，我们将结合代码示例进行讲解。注意，本文中的HTML代码请使用H2标签，CSS代码请使用H3标签。所有HTML标签前后都要加上
标签，以便于阅读。

HTML结构部分

首先，我们需要定义一个用于包含菜单的容器，然后在其中创建菜单项。HTML代码如下：

<div class="menu-container">
  <a href="#">菜单项1</a>
  <a href="#">菜单项2</a>
  <a href="#">菜单项3</a>
  <a href="#">菜单项4</a>
  <a href="#">菜单项5</a>
</div>

上述代码中，我们创建了一个名为menu-container的容器，并在其中添加了5个菜单项。这些菜单项可以根据实际需求进行添加、删除或修改。
接下来，我们需要在CSS中定义菜单的样式。

CSS样式部分

为了使菜单项呈现出滑动效果，我们需要为menu-container添加一些CSS样式。CSS代码如下：

.menu-container{
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

a{
  flex: 0 0 100px;
  height: 100px;
  background: #ccc;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 18px;
  scroll-snap-align: center;
  margin-right: 10px;
}

a:last-child{
  margin-right: 0;
}

上述代码中，我们使用了flex布局，将菜单项水平排列。然后，我们为menu-container添加了overflow-x:scroll属性，使其能够水平滚动。接着，我们使用scroll-snap-type和scroll-snap-align属性，使菜单项能够按照固定间距滑动，并在停止滑动时自动对齐。最后，我们为菜单项设置了样式，包括宽度、高度、背景色、字体颜色、文本居中等等。
至此，我们已经完成了滑动菜单的HTML和CSS部分的编写。接下来，我们将讲解如何实现JavaScript部分。

JavaScript部分

在JavaScript中，我们需要使用一些事件监听器来响应用户的操作。具体代码如下：

var menu = document.querySelector('.menu-container');
var startX, currentX, moveX, flag = false;

menu.addEventListener('touchstart', function (e) {
  startX = e.touches[0].pageX;
  currentX = startX;
  flag = true;
});

menu.addEventListener('touchmove', function (e) {
  if (flag) {
    moveX = e.touches[0].pageX - currentX;
    currentX = e.touches[0].pageX;
    menu.scrollLeft -= moveX;
  }
});

menu.addEventListener('touchend', function (e) {
  flag = false;
});

上述代码中，我们使用了touchstart、touchmove和touchend事件，分别对应着用户触摸菜单、滑动菜单和停止滑动菜单三个过程。在touchstart事件中，我们记录了用户触摸的起始位置，并将flag设置为true。在touchmove事件中，我们根据用户滑动的距离，动态地改变menu-container的滚动位置。在touchend事件中，我们将flag设置为false，表示当前用户已经停止滑动菜单。
至此，我们已经完成了使用HTML、CSS和JavaScript创建滑动菜单效果的全部过程。希望本文对大家有所帮助。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com