CSS 制作可折叠的侧边抽屉菜单示例
在网页设计中，侧边抽屉菜单是一种常见的交互元素，它可以帮助用户在不离开当前页面内容的情况下，快速访问导航链接。可折叠的侧边抽屉菜单可以提供更好的用户体验，因为它可以节省屏幕空间，并且用户可以根据需要展开或折叠菜单。本文将使用HTML和CSS来创建一个可折叠的侧边抽屉菜单示例。
1. 基础HTML结构
我们需要构建一个基本的HTML结构，它将包含菜单的容器、菜单项以及控制菜单展开和折叠的按钮。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapsible Sidebar Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sidebar">
<button class="menu-toggle">☰ Menu</button>
<nav class="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li class="submenu">
<a href="">Services</a>
<ul class="submenu-content">
<li><a href="">Web Design</a></li>
<li><a href="">Hosting</a></li>
<li><a href="">SEO</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS样式
接下来，我们将使用CSS来设计侧边抽屉菜单的外观，并添加交互效果。
css
/ styles.css /
body {
margin: 0;
font-family: Arial, sans-serif;
}
.sidebar {
width: 250px;
height: 100vh;
background-color: 333;
position: fixed;
left: -250px;
transition: left 0.3s;
}
.menu-toggle {
background-color: 333;
color: white;
border: none;
padding: 10px;
width: 100%;
cursor: pointer;
}
.menu {
list-style: none;
padding: 0;
}
.menu li a {
display: block;
padding: 15px;
color: white;
text-decoration: none;
transition: background-color 0.3s;
}
.menu li a:hover {
background-color: 555;
}
.submenu {
position: relative;
}
.submenu-content {
display: none;
position: absolute;
left: 100%;
top: 0;
background-color: 333;
list-style: none;
padding: 0;
}
.submenu-content li a {
padding: 10px;
}
.submenu-content li a:hover {
background-color: 555;
}
/ Toggle menu on click /
.menu-toggle:checked + .menu ul {
display: block;
}
.menu li.submenu:hover .submenu-content {
display: block;
}
3. JavaScript交互
我们使用JavaScript来增强菜单的交互性，使得点击菜单项可以展开或折叠子菜单。
javascript
// script.js
document.addEventListener('DOMContentLoaded', function () {
var menuToggle = document.querySelector('.menu-toggle');
var menu = document.querySelector('.menu');
menuToggle.addEventListener('click', function () {
var isMenuOpen = menu.classList.contains('open');
menu.classList.toggle('open');
if (isMenuOpen) {
menu.style.left = '0';
} else {
menu.style.left = '-250px';
}
});
var submenuItems = document.querySelectorAll('.submenu');
submenuItems.forEach(function (submenuItem) {
submenuItem.addEventListener('mouseover', function () {
this.querySelector('.submenu-content').style.display = 'block';
});
submenuItem.addEventListener('mouseout', function () {
this.querySelector('.submenu-content').style.display = 'none';
});
});
});
4. 总结
通过上述代码，我们创建了一个可折叠的侧边抽屉菜单。用户可以通过点击菜单按钮来展开或折叠整个菜单，同时子菜单可以通过鼠标悬停来展开。这种设计不仅美观，而且功能强大，能够提升用户体验。
在实际开发中，可以根据具体需求调整样式和交互逻辑。例如，可以添加动画效果、响应式设计、以及与其他前端框架的集成等。通过不断优化和调整，可以打造出更加符合用户需求的侧边抽屉菜单。
Comments NOTHING