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

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

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

理解 Bulma 的 n*bar 响应式结构

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

基础结构如下：

<n* class="n*bar" role="n*igation" aria-label="main n*igation">
  <div class="n*bar-brand">
    <a class="n*bar-item" href="/">Logo</a>

    <div class="n*bar-burger" data-target="n*Menu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="n*Menu" class="n*bar-menu">
    <div class="n*bar-start">
      <a class="n*bar-item" href="/home">首页</a>
      <a class="n*bar-item" href="/about">关于</a>
    </div>
  </div>
</n*>

添加 responsive 控制类

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

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

修改后的代码片段：

AppStruct

无代码应用开发平台

132 查看详情

<div class="n*bar-burger is-hidden-desktop" data-target="n*Menu">
  <span></span>
  <span></span>
  <span></span>
</div>

<div id="n*Menu" class="n*bar-menu is-hidden-mobile">
  ...
</div>

使用 J*aScript 实现点击切换

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

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

document.addEventListener('DOMContentLoaded', () => {
  const $n*barBurgers = Array.prototype.slice.call(document.querySelectorAll('.n*bar-burger'), 0);

  $n*barBurgers.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');
    });
  });
});

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

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

以上就是如何在CSS中使用Bulma制作导航栏折叠_Bulma n*bar组件结合responsive类的详细内容，更多请关注其它相关文章！