js实现汉堡收缩
实现汉堡菜单的收缩功能
HTML结构需要包含汉堡按钮和菜单内容
<button class="hamburger">☰</button>
<nav class="menu">
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">关于</a>
<a href="#">联系</a>
</nav>
CSS样式设置初始状态和动画效果
.menu {
display: none;
transition: all 0.3s ease;
}
.menu.active {
display: block;
}
.hamburger {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
JavaScript实现切换功能
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', () => {
menu.classList.toggle('active');
});
添加动画效果增强体验
修改CSS添加平滑过渡
.menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.menu.active {
max-height: 500px;
}
响应式设计实现
通过媒体查询控制显示方式
@media (min-width: 768px) {
.hamburger {
display: none;
}
.menu {
display: flex;
max-height: none;
}
}
优化可访问性
添加ARIA属性
<button class="hamburger" aria-expanded="false" aria-controls="menu">☰</button>
<nav class="menu" id="menu">
<!-- 菜单项 -->
</nav>
更新JavaScript
hamburger.addEventListener('click', () => {
const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';
hamburger.setAttribute('aria-expanded', !isExpanded);
menu.classList.toggle('active');
});
使用CSS变量控制样式
定义可自定义的变量
:root {
--menu-bg: #333;
--menu-item-color: white;
--transition-time: 0.3s;
}
.menu {
background: var(--menu-bg);
transition: max-height var(--transition-time) ease-out;
}
.menu a {
color: var(--menu-item-color);
}