Bulma导航栏折叠技巧分享

你在学习文章相关的知识吗？本文《Bulma导航栏折叠技巧｜响应式菜单实现方法》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

通过结合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 提供的状态类来切换显示。

基础结构如下：

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">Logo</a>

    <div class="navbar-burger" data-target="navMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navMenu" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="/home">首页</a>
      <a class="navbar-item" href="/about">关于</a>
    </div>
  </div>
</nav>

添加 responsive 控制类

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

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

修改后的代码片段：

<div class="navbar-burger is-hidden-desktop" data-target="navMenu">
  <span></span>
  <span></span>
  <span></span>
</div>

<div id="navMenu" class="navbar-menu is-hidden-mobile">
  ...
</div>

使用 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，就能快速实现一个美观且实用的折叠导航栏。不复杂但容易忽略细节。

理论要掌握，实操不能落！以上关于《Bulma导航栏折叠技巧分享》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！