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

P粉602998670

发布时间：2025-09-23 09:31:01

590人浏览过

来源于php中文网

原创

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

）的容器。这个按钮是实现响应式折叠的关键。

这段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结构准备：

通用产品企业网站(.NET2.0)1.0
1、系统采用.net2.0开发，数据库access2、三层架构，数据层、逻辑层和表示层分离3、系统完全使用div＋css布局，可以灵活处理界面4、技术特点: 使用模板页，大大减少代码量动态生成竖向导航菜单 ul li实现表格各种自定义用户空间 Reapter等数据控件的灵活运用

下载
- 在
```
navbar-brand
```
  内部放置一个
```
navbar-burger
```
  元素。这个元素通常由三个
```
span
```
  组成，代表汉堡图标的三条线。
- 给
```
navbar-burger
```
  添加
```
data-target
```
  属性，其值应与你的主菜单容器（
```
navbar-menu
```
  ）的
```
id
```
  相同。这是JavaScript用来知道要控制哪个菜单的关键。
- 主菜单容器
```
navbar-menu
```
  需要一个唯一的
```
id
```
  ，以便
```
data-target
```
  能够精准定位。
```
  
  
    
    
    
  



  
```
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来切换）。
```
  
```
创建
```
navbar-link
```
：在
```
has-dropdown
```
的
```
navbar-item
```
内部，通常会有一个
```
navbar-link
```
。这是用户点击或悬停时看到的父级菜单项。
```
  服务
```
构建
```
navbar-dropdown
```
：紧接着
```
navbar-link
```
，创建一个
```
div
```
并赋予
```
navbar-dropdown
```
类。这个
```
div
```
就是实际的下拉菜单容器。
```
  
```

添加下拉菜单项： 在

navbar-dropdown

内部，每个子菜单项都是一个

navbar-item

。你也可以在其中添加

hr

并赋予

navbar-divider

类来创建分隔线。

通过这样的结构，一个功能完善的下拉菜单就创建好了。

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变量或更精确的选择器来解决。