创建一个响应式的折叠下拉菜单是网站设计中的一个常见需求。使用 HTML5、CSS3 和 JavaScript,我们可以轻松实现这一功能。以下是一个简单的示例,展示如何创建一个折叠菜单,该菜单在不同屏幕尺寸下能够自动调整,以提供良好的用户体验。
HTML 结构
首先,我们需要构建菜单的 HTML 结构。我们将使用 <div> 元素来创建菜单项,并通过点击显示或隐藏子菜单。
<!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">
<button class="menu-toggle" aria-controls="submenu-1" aria-expanded="false">
Menu Item 1
</button>
<ul id="submenu-1" class="submenu">
<li><a href="#">Subitem 1-1</a></li>
<li><a href="#">Subitem 1-2</a></li>
<li><a href="#">Subitem 1-3</a></li>
</ul>
<button class="menu-toggle" aria-controls="submenu-2" aria-expanded="false">
Menu Item 2
</button>
<ul id="submenu-2" class="submenu">
<li><a href="#">Subitem 2-1</a></li>
<li><a href="#">Subitem 2-2</a></li>
<li><a href="#">Subitem 2-3</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 样式
接下来,我们需要一些 CSS 来美化菜单,并使其在不同屏幕尺寸下具有响应性。
/* styles.css */
.menu {
list-style: none;
padding: 0;
}
.menu > button {
background: #333;
color: white;
padding: 10px;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
}
.submenu {
display: none;
list-style: none;
padding-left: 20px;
}
.submenu li {
padding: 5px 0;
}
@media screen and (min-width: 600px) {
.submenu {
display: block;
}
}
JavaScript 行为
最后,我们需要一些 JavaScript 来添加交互功能。我们将使用 JavaScript 来监听按钮的点击事件,并根据点击状态切换子菜单的显示状态。
// script.js
document.addEventListener('DOMContentLoaded', function() {
var menuToggles = document.querySelectorAll('.menu-toggle');
for (var i = 0; i < menuToggles.length; i++) {
var toggle = menuToggles[i];
var submenu = document.getElementById(toggle.getAttribute('aria-controls'));
toggle.addEventListener('click', function() {
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
submenu.style.display = isExpanded ? 'none' : 'block';
});
}
});
在这个例子中,我们使用了 ARIA 属性来增强可访问性。aria-controls 属性链接按钮和对应的子菜单,而 aria-expanded 属性表示子菜单的当前状态。
通过这种方式,我们创建了一个基本且响应式的折叠菜单。这个菜单在屏幕宽度小于 600px 时会隐藏所有子菜单,点击主菜单项时展开相应的子菜单。你可以根据需要调整样式和行为,以满足特定设计需求。
