📜  我可以单独使用 css 做一个 onclick 菜单吗 - CSS (1)

📅  最后修改于: 2023-12-03 15:25:42.615000             🧑  作者: Mango

我可以单独使用 CSS 做一个 onClick 菜单吗 - CSS

当然可以!你可以使用 CSS 和一点 JavaScript 来创建自己的 onClick 菜单。以下是一些提示来帮助你开始。

HTML 结构

你可以使用以下 HTML 结构来创建菜单:

<div class="menu">
  <div class="menu-btn">菜单</div>
  <ul class="menu-list">
    <li><a href="#">菜单项 1</a></li>
    <li><a href="#">菜单项 2</a></li>
    <li><a href="#">菜单项 3</a></li>
    <li><a href="#">菜单项 4</a></li>
    <li><a href="#">菜单项 5</a></li>
  </ul>
</div>
CSS 样式

你可以使用以下 CSS 样式来控制菜单的外观和行为:

.menu {
  position: relative;
}

.menu-btn {
  cursor: pointer;
  font-weight: bold;
}

.menu-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.menu:hover .menu-list,
.menu:focus .menu-list {
  display: block;
}

.menu-list li {
  margin: 5px 0;
}

.menu-list a {
  display: block;
  padding: 5px;
  text-decoration: none;
  color: #333;
}

.menu-list a:hover {
  color: #fff;
  background-color: #333;
}
JavaScript

你可以使用以下 JavaScript 代码来切换菜单的打开和关闭状态:

let menuBtn = document.querySelector('.menu-btn');
let menuList = document.querySelector('.menu-list');

menuBtn.onclick = function() {
  menuList.classList.toggle('open');
}
结论

使用上述 HTML、CSS 和 JavaScript 代码,你可以轻松地创建自己的 onClick 菜单。你可以使用 CSS 控制菜单的外观和样式,使用 JavaScript 控制菜单的行为,使之符合你的需求。