如何用css框架Bulma实现导航菜单-css教程-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

登录后复制

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

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

表单大师AI
一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情
- 在
```
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
```
  登录后复制
  上改变其背景色，如
```
<nav class="navbar is-danger">
```
  登录后复制
  。
- 间距类：
```
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变量或更精确的选择器来解决。