用css和js写一个悬浮菜单

以下是一个简单的悬浮菜单的HTML、CSS和JS代码示例：

HTML代码：

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

CSS代码：

.menu {
  position: fixed;
  top: 50px;
  right: 50px;
  z-index: 9999;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  margin-bottom: 10px;
}

.menu a {
  display: block;
  padding: 10px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

.menu a:hover {
  background-color: #555;
}

JS代码：

var menu = document.querySelector('.menu');
var isOpen = false;

menu.addEventListener('click', function() {
  if (isOpen) {
    menu.classList.remove('open');
    isOpen = false;
  } else {
    menu.classList.add('open');
    isOpen = true;
  }
});

在CSS中，我们将菜单设置为固定定位，以便它可以随着页面滚动而保持在页面的顶部位置。我们还设置了菜单项的样式，包括背景色、文本颜色和鼠标悬停时的背景色。

在JS中，我们使用了一个变量isOpen来跟踪菜单是否打开。当菜单被点击时，我们检查它是否打开。如果是，我们将菜单的“open”类删除，并将isOpen设置为false。否则，我们将“open”类添加到菜单中，并将isOpen设置为true。我们还将使用CSS中的“open”类来显示或隐藏菜单项