html制作浮动菜单

要制作一个浮动菜单，可以使用 HTML、CSS 和 JavaScript。以下是一个简单的示例：

1. HTML 代码：

<div class="menu">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

2. CSS 代码：

.menu {
  position: fixed; /* 固定定位 */
  top: 50%; /* 距离顶部的距离 */
  left: 0; /* 距离左边的距离 */
  transform: translateY(-50%); /* 垂直居中 */
  z-index: 999; /* 层级 */
}
.menu ul {
  list-style: none; /* 去掉列表样式 */
  margin: 0;
  padding: 0;
}
.menu li {
  display: block;
  margin-bottom: 10px;
}
.menu a {
  display: block;
  padding: 10px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
}
.menu a:hover {
  background-color: #666;
}

3. JavaScript 代码：

var menu = document.querySelector('.menu');
window.addEventListener('scroll', function() {
  if (window.pageYOffset > 100) { /* 当滚动条滚动的距离超过100px时 */
    menu.classList.add('visible'); /* 添加一个 visible 类 */
  } else {
    menu.classList.remove('visible'); /* 移除 visible 类 */
  }
});

这个代码会在页面滚动时显示或隐藏菜单。可以根据需要进行修改。