使用JavaScript创建简单的抽屉式菜单需要以下步骤：
<button id="menu-btn">菜单</button><div id="menu-container">
<a href="#">菜单项1</a>
<a href="#">菜单项2</a>
<a href="#">菜单项3</a>
</div>#menu-container {
position: absolute;
left: -200px; /* 负值为菜单容器的宽度 */
top: 0;
width: 200px;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
var menuBtn = document.getElementById('menu-btn');
var menuContainer = document.getElementById('menu-container');menuBtn.addEventListener('click', function() { if (menuContainer.style.left === '-200px') { menuContainer.style.left = 0; } else { menuContainer.style.left = '-200px'; } });
完整的代码如下所示：
```html
<button id="menu-btn">菜单</button>
<div id="menu-container">
<a href="#">菜单项1</a>
<a href="#">菜单项2</a>
<a href="#">菜单项3</a>
</div>
<style>
#menu-container {
position: absolute;
left: -200px; /* 负值为菜单容器的宽度 */
top: 0;
width: 200px;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
</style>
<script>
var menuBtn = document.getElementById('menu-btn');
var menuContainer = document.getElementById('menu-container');
menuBtn.addEventListener('click', function() {
if (menuContainer.style.left === '-200px') {
menuContainer.style.left = 0;
} else {
menuContainer.style.left = '-200px';
}
});
</script>关键词高亮：JavaScript、抽屉式菜单、页面、菜单按钮、菜单容器、事件监听器、显示状态