如何在CSS中使用Bulma制作导航栏折叠_Bulma navbar组件结合responsive类-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-28 11:48:36

原创

761人浏览过

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

如何在css中使用bulma制作导航栏折叠_bulma navbar组件结合responsive类

在使用 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，默认在移动端隐藏

修改后的代码片段：

讯飞绘文

讯飞绘文：免费AI写作/AI生成文章

118

查看详情

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

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