html5 手机端菜单滑动效果

要在HTML5手机端实现菜单滑动效果，可以使用CSS和JavaScript来实现。下面是一个简单的示例：

HTML代码：

<div class="menu">
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
    <li>菜单项4</li>
    <li>菜单项5</li>
  </ul>
</div>

CSS代码：

.menu {
  width: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  flex: 0 0 auto;
  padding: 10px;
  background-color: #f1f1f1;
  border-right: 1px solid #ccc;
}

JavaScript代码：

window.addEventListener('DOMContentLoaded', function() {
  var menu = document.querySelector('.menu');
  var startX = 0;
  var currentX = 0;

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

  menu.addEventListener('touchmove', function(e) {
    var touch = e.touches[0];
    var deltaX = currentX - touch.clientX;

    currentX = touch.clientX;

    menu.scrollLeft += deltaX;
  });

  menu.addEventListener('touchend', function(e) {
    var touch = e.changedTouches[0];
    var deltaX = touch.clientX - startX;

    if (deltaX < 0) {
      menu.scrollLeft += Math.abs(deltaX);
    } else {
      menu.scrollLeft -= Math.abs(deltaX);
    }
  });
});

这段代码会给菜单容器添加滑动监听器，当用户在菜单上滑动时，菜单容器会跟随手指滚动。需要注意的是，为了让滑动效果在移动设备上更流畅，我们使用了-webkit-overflow-scrolling: touch;来启用硬件加速。同时，为了适应不同的移动设备屏幕，我们使用了flex布局来自动调整菜单项的大小和间距。

你可以根据自己的需求修改代码中的样式和逻辑，以满足你的具体要求