js实现汉堡收缩

实现汉堡菜单的收缩功能

使用JavaScript实现汉堡菜单的收缩效果，可以通过操作DOM元素的类名或样式属性来完成。以下是几种常见方法：

方法一：通过classList切换类

const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

hamburger.addEventListener('click', () => {
  menu.classList.toggle('active');
  hamburger.classList.toggle('is-active');
});

CSS部分需要预先定义好：

.menu {
  display: none;
}
.menu.active {
  display: block;
}
.hamburger.is-active {
  /* 汉堡图标动画效果 */
}

方法二：直接操作style属性

const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');

hamburger.addEventListener('click', () => {
  if (navMenu.style.display === 'none' || !navMenu.style.display) {
    navMenu.style.display = 'block';
  } else {
    navMenu.style.display = 'none';
  }
});

方法三：使用jQuery实现

$('.hamburger').click(function() {
  $('.menu').slideToggle();
  $(this).toggleClass('is-active');
});

方法四：添加过渡动画

JavaScript:

const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

hamburger.addEventListener('click', () => {
  menu.style.transition = 'all 0.3s ease';
  if (menu.style.transform === 'translateX(0%)') {
    menu.style.transform = 'translateX(-100%)';
  } else {
    menu.style.transform = 'translateX(0%)';
  }
});

CSS:

.menu {
  transform: translateX(-100%);
}

注意事项

• 确保HTML结构包含汉堡按钮和菜单元素
• 移动端需要考虑触摸事件
• 对于可访问性，应添加适当的ARIA属性
• 动画效果应流畅不卡顿

以上方法可以根据具体项目需求选择使用，classList方法是最推荐的做法，因为它将样式与行为分离，更易于维护。