以下是一个简单的JavaScript侧拉菜单的示例代码:
HTML结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧拉菜单示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-icon" onclick="toggleMenu()">☰</div>
<ul id="side-menu" class="side-menu">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
<script src="script.js"></script>
</body>
</html>
CSS样式(styles.css):
body {
margin: 0;
font-family: Arial, sans-serif;
}
.menu-icon {
position: fixed;
top: 10px;
left: 10px;
cursor: pointer;
z-index: 1000;
}
.side-menu {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: #333;
list-style-type: none;
padding: 0;
margin: 0;
transition: left 0.3s ease;
z-index: 999;
}
.side-menu li {
padding: 15px;
color: white;
border-bottom: 1px solid #555;
}
.side-menu.active {
left: 0;
}
JavaScript代码(script.js):
function toggleMenu() {
const menu = document.getElementById('side-menu');
menu.classList.toggle('active');
}
基础概念:
position: fixed
)固定在页面左侧,并且初始状态下left
值为负数使其隐藏在屏幕外,通过添加active
类改变left
值来显示菜单。active
类,从而实现显示和隐藏菜单的功能。优势:
应用场景:
没有搜到相关的文章