如何在CSS中使用Bulma制作导航栏折叠_Bulma navbar组件结合responsive类

通过结合Bulma的响应式类与JavaScript，可实现导航栏折叠。首先构建包含navbar-burger和navbar-menu的基础结构；接着添加is-hidden-desktop和is-hidden-mobile类优化移动端显示；最后通过JavaScript监听点击事件，切换is-active类控制菜单显隐，完成交互。

在使用 Bulma 框架构建响应式网站时，导航栏（navbar）的折叠功能对移动端体验至关重要。Bulma 提供了内置的 responsive 类和结构化组件，结合简单的 JavaScript 可轻松实现导航栏在小屏幕下的折叠效果。

理解 Bulma 的 navbar 响应式结构

Bulma 的 navbar 默认在桌面端显示完整菜单，但在移动设备上需要手动控制折叠。关键在于使用 navbar-burger 和 navbar-menu 元素，并配合 is-active 这个 Bulma 提供的状态类来切换显示。

基础结构如下：

添加 responsive 控制类

Bulma 支持通过 is-hidden-mobile 等辅助类控制元素在不同断点的显示。将 navbar-burger 和 navbar-menu 设置为仅在移动端折叠状态显示或隐藏，可提升用户体验。

• 给 .navbar-burger 添加 is-hidden-desktop，使其只在移动端可见
• 给 .navbar-menu 添加 is-hidden-mobile，默认在移动端隐藏

修改后的代码片段：

  
  
  



  ...

使用 JavaScript 实现点击切换

Bulma 不包含 JavaScript 功能，因此需要手动添加脚本来切换 is-active 类。

加入以下 JS 代码即可实现汉堡按钮与菜单联动：

document.addEventListener('DOMContentLoaded', () => {
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  $navbarBurgers.forEach(el => {
    el.addEventListener('click', () => {
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');
    });
  });
});

当用户点击汉堡按钮时，.navbar-burger 和对应的 .navbar-menu 都会切换 is-active 类，从而显示或隐藏菜单。

基本上就这些。通过 Bulma 提供的响应式类与简洁的 DOM 结构，再辅以几行 JavaScript，就能快速实现一个美观且实用的折叠导航栏。不复杂但容易忽略细节。