javascript滑动菜单
时间: 2024-01-07 08:23:15 浏览: 30
以下是使用JavaScript实现滑动菜单的步骤和代码示例:
1. 在HTML文件中创建一个菜单容器和一个菜单图标:
```html
<div class="menu-container">
<!-- 菜单内容 -->
</div>
<div class="menu-icon">
<!-- 菜单图标 -->
</div>
```
2. 在CSS文件中设置菜单容器的样式,使其隐藏在左侧:
```css
.menu-container {
position: fixed;
top: 0;
left: -200px; /* 初始位置在左侧 */
width: 200px;
height: 100vh;
background-color: #f1f1f1;
transition: left 0.3s ease; /* 添加过渡效果 */
}
```
3. 在JavaScript文件中编写代码,实现点击菜单图标展开和收缩菜单的功能:
```javascript
document.addEventListener('DOMContentLoaded', function() {
var menuIcon = document.querySelector('.menu-icon');
var menuContainer = document.querySelector('.menu-container');
menuIcon.addEventListener('click', function() {
if (menuContainer.style.left === '-200px') {
menuContainer.style.left = '0'; // 展开菜单
} else {
menuContainer.style.left = '-200px'; // 收缩菜单
}
});
});
```
这段代码使用了事件监听器,当菜单图标被点击时,会检查菜单容器的位置。如果菜单容器的left属性为-200px(即菜单收缩状态),则将其left属性设置为0,从而展开菜单;如果菜单容器的left属性为0(即菜单展开状态),则将其left属性设置为-200px,从而收缩菜单。