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