📅  最后修改于: 2023-12-03 15:25:42.615000             🧑  作者: Mango
当然可以!你可以使用 CSS 和一点 JavaScript 来创建自己的 onClick 菜单。以下是一些提示来帮助你开始。
你可以使用以下 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 样式来控制菜单的外观和行为:
.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 代码来切换菜单的打开和关闭状态:
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 控制菜单的行为,使之符合你的需求。