当前位置：首页 > 文章列表 > 文章 > 前端 > Bulma导航菜单实现方法详解

Bulma导航菜单实现方法详解

2025-12-07 11:26:29 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《Bulma导航菜单实现教程》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

Bulma导航菜单通过navbar组件实现，核心是利用navbar-brand、navbar-menu及is-active类配合JavaScript控制响应式折叠；下拉菜单使用has-dropdown和is-hoverable类构建；自定义样式推荐通过SASS变量覆盖实现主题调整。

如何用css框架Bulma实现导航菜单

Bulma框架实现导航菜单，核心在于其navbar组件的灵活组合。它将导航栏拆分为品牌区、菜单区，并利用CSS类和少量JavaScript（通常用于移动端折叠）来构建一个功能完善、响应式的导航体验。在我看来，Bulma的这种设计哲学——提供基础骨架，将交互逻辑交给开发者——既是它的优点，也可能是初学者的一个小门槛，但一旦掌握，自由度极高。

解决方案

要用Bulma构建一个导航菜单，我们通常会从一个nav标签开始，并赋予它navbar类。这个组件内部主要有几个关键部分：navbar-brand、navbar-menu，以及它们内部的navbar-item、navbar-link等。

首先，navbar-brand是你的品牌标识和在移动设备上显示的“汉堡”菜单按钮（navbar-burger）的容器。这个按钮是实现响应式折叠的关键。

<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        首页
      </a>

      <a class="navbar-item">
        产品
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          更多
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            关于我们
          </a>
          <a class="navbar-item">
            联系我们
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            报告问题
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>注册</strong>
          </a>
          <a class="button is-light">
            登录
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

这段HTML骨架搭建了一个基本的导航栏。其中，navbar-burger的data-target属性指向了navbar-menu的id，这是JavaScript用来关联和切换菜单可见性的关键。navbar-menu默认在桌面端是可见的，但在移动端会被隐藏，直到navbar-burger被点击并添加is-active类。

为了让这个“汉堡”按钮能实际工作，我们需要一点点JavaScript。Bulma本身是“CSS-only”框架，这意味着它不包含JavaScript组件，这是为了让开发者有更大的自由度选择自己喜欢的JS库或原生JS。通常，我们会这样来激活它：

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

  if ($navbarBurgers.length > 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');
      });
    });
  }
});

这段JS代码会在DOM加载完成后，找到所有的navbar-burger，并为它们添加点击事件监听器。当点击发生时，它会切换navbar-burger和其对应navbar-menu的is-active类，从而控制菜单的展开和折叠。这种手动连接JS的方式，虽然增加了初期配置，但确实让项目更轻量，避免了不必要的JS加载。

Bulma导航菜单如何实现响应式折叠效果？

实现响应式折叠效果是现代导航菜单的标配，Bulma在这方面提供了一套非常优雅的CSS方案，但如前所述，它需要一点JavaScript来“激活”这个机制。在我看来，Bulma这种分离关注点的做法很聪明，因为它让开发者可以完全掌控交互逻辑，而不是被框架的JS所束缚。

核心思路是利用navbar-burger和navbar-menu这两个元素，通过切换一个is-active类来控制它们的显示和隐藏。

HTML结构准备：
- 在navbar-brand内部放置一个navbar-burger元素。这个元素通常由三个span组成，代表汉堡图标的三条线。
- 给navbar-burger添加data-target属性，其值应与你的主菜单容器（navbar-menu）的id相同。这是JavaScript用来知道要控制哪个菜单的关键。
- 主菜单容器navbar-menu需要一个唯一的id，以便data-target能够精准定位。
```
<div class="navbar-brand">
  
  <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="myNavbarMenu">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
  </a>
</div>

<div id="myNavbarMenu" class="navbar-menu">
  
</div>
```
JavaScript激活逻辑：
- 当页面加载完毕后，我们需要找到所有的navbar-burger元素。
- 为每个navbar-burger添加一个点击事件监听器。
- 在点击事件中，获取当前被点击navbar-burger的data-target属性值，这会告诉我们它对应的菜单id。
- 根据这个id找到对应的navbar-menu元素。
- 最后，分别在navbar-burger和navbar-menu上切换is-active类。当is-active类存在时，Bulma的CSS会使菜单展开并显示汉堡图标的“X”状态；当is-active类不存在时，菜单会折叠并隐藏，汉堡图标恢复原状。
```
document.addEventListener('DOMContentLoaded', () => {
  const burger = document.querySelector('.navbar-burger'); // 假设只有一个
  if (burger) {
    burger.addEventListener('click', () => {
      const targetId = burger.dataset.target;
      const targetMenu = document.getElementById(targetId);

      burger.classList.toggle('is-active');
      targetMenu.classList.toggle('is-active');
    });
  }
});
```
这个JS片段是响应式折叠功能的核心，它弥补了Bulma纯CSS的“最后一公里”。Bulma的CSS会根据is-active类的存在与否，自动处理菜单的动画和布局变化，比如在移动端将navbar-menu从display: none变为display: flex（或block）。这种设计让我觉得很灵活，你可以选择原生JS，也可以用jQuery或其他框架来完成同样的任务。

在Bulma导航栏中添加下拉菜单（Dropdown）的步骤是什么？

下拉菜单在导航栏中非常常见，用于组织更多的内容或提供二级导航。Bulma的下拉菜单实现同样是基于CSS类，非常直观。我个人觉得，Bulma的is-hoverable类对于桌面端的用户体验来说是极好的，因为它不需要额外的点击就能展开菜单，非常流畅。

确定下拉菜单的位置： 下拉菜单通常是navbar-item的一个变体。你可以在navbar-start或navbar-end内部的任何navbar-item中创建下拉菜单。
添加has-dropdown和is-hoverable类：
- 将你的navbar-item标记为has-dropdown。这是告诉Bulma这个项是一个下拉菜单的容器。
- 添加is-hoverable类（可选但推荐）。这个类会在鼠标悬停时自动显示下拉菜单。如果你想通过点击来触发下拉菜单，可以移除is-hoverable，并在navbar-item上添加is-active类（通常需要JavaScript来切换）。
```
<div class="navbar-item has-dropdown is-hoverable">
  
</div>
```
创建navbar-link： 在has-dropdown的navbar-item内部，通常会有一个navbar-link。这是用户点击或悬停时看到的父级菜单项。
```
<a class="navbar-link">
  服务
</a>
```
构建navbar-dropdown： 紧接着navbar-link，创建一个div并赋予navbar-dropdown类。这个div就是实际的下拉菜单容器。
```
<div class="navbar-dropdown">
  
</div>
```

添加下拉菜单项： 在navbar-dropdown内部，每个子菜单项都是一个navbar-item。你也可以在其中添加hr并赋予navbar-divider类来创建分隔线。

<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link">
    产品分类
  </a>
  <div class="navbar-dropdown">
    <a class="navbar-item">
      电子产品
    </a>
    <a class="navbar-item">
      服饰鞋包
    </a>
    <hr class="navbar-divider">
    <a class="navbar-item">
      所有产品
    </a>
  </div>
</div>

通过这样的结构，一个功能完善的下拉菜单就创建好了。is-hoverable在桌面端非常方便，但在移动端，由于没有“悬停”的概念，你可能需要配合JavaScript来切换is-active类，以便点击父级菜单项时能展开下拉菜单。当然，Bulma默认的响应式处理在小屏幕上通常会将所有下拉菜单项都直接显示在主菜单下方，这也是一种可接受的方案。

如何自定义Bulma导航菜单的样式和布局？

Bulma的强大之处在于其高度模块化和基于SASS的设计，这让自定义样式和布局变得相对容易。我个人在使用Bulma时，最喜欢的就是可以通过覆盖SASS变量来快速调整主题，而不需要写大量的自定义CSS。这不仅效率高，也保持了代码的一致性。

通过SASS变量进行主题定制（推荐方式）： Bulma几乎所有的颜色、字体、间距、边框等样式都由SASS变量控制。要自定义导航菜单，最有效的方式就是覆盖这些变量。
- 设置项目： 你需要一个SASS编译环境（例如Node.js配合node-sass或sass包）。
- 创建自定义SASS文件： 通常是_variables.scss或_custom.scss。
- 导入Bulma的变量和主文件： 在你的主SASS文件（例如main.scss）中，首先导入你自定义的变量，然后导入Bulma的变量和Bulma的主文件。顺序很重要，自定义变量必须在Bulma的默认变量之前被定义。
```
// _custom.scss (或 _variables.scss)
$navbar-background-color: #363636; // 深灰色背景
$navbar-item-color: #f5f5f5;      // 亮白色文字
$navbar-item-hover-color: #00d1b2; // 悬停时的青绿色
$navbar-height: 4.5rem;           // 增加导航栏高度

// main.scss
@import "bulma/sass/utilities/_all.sass"; // Bulma的工具函数
@import "bulma/sass/base/_all.sass";      // Bulma的基础样式
@import "bulma/sass/components/navbar.sass"; // 只导入navbar组件
// ... 导入其他你需要的Bulma组件 ...
```
通过这种方式，你可以轻松调整导航栏的背景色、文字颜色、悬停效果、高度等几乎所有视觉属性。这种方法比直接写覆盖CSS权重更高，也更符合Bulma的设计哲学。
使用Bulma的辅助类： Bulma提供了大量的辅助类来调整布局和样式，例如：
- 颜色类： is-primary, is-link, is-info, is-success, is-warning, is-danger 可以直接应用到navbar上改变其背景色，如
  。
- 间距类： m-x, p-y 等可以用于调整navbar-item内部的间距，但通常不直接用于navbar组件本身。
- 文本对齐： has-text-centered, has-text-right 等。
- 阴影： has-shadow 可以给导航栏添加一个阴影效果。
编写自定义CSS（当SASS变量不足时）： 有时候，SASS变量可能无法满足所有复杂的定制需求，或者你只是想对某个特定元素进行微调。这时，你可以编写自己的CSS来覆盖Bulma的默认样式。
```
/* custom.css */
.navbar-item img {
  max-height: 2.5rem; /* 调整Logo图片的最大高度 */
}

.navbar-menu.is-active {
  background-color: rgba(54, 54, 54, 0.95); /* 移动端展开菜单的半透明背景 */
}

@media screen and (max-width: 768px) {
  .navbar-item.has-dropdown.is-hoverable .navbar-dropdown {
    position: static; /* 在移动端，下拉菜单不再浮动 */
    box-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}
```
在编写自定义CSS时，要注意CSS的特异性（specificity）。你可能需要使用更具体的选择器（例如.navbar.is-primary .navbar-item）或者!important来确保你的样式能够覆盖Bulma的默认样式。不过，过度使用!important通常被视为不良实践，所以我更倾向于通过SASS变量或更精确的选择器来解决。