使用 CSS 和 JavaScript 创建悬浮菜单

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'类来显示或隐藏菜单项。