Bulma导航菜单通过navbar组件实现，核心是利用navbar-brand、navbar-menu及is-active类配合JavaScript控制响应式折叠；下拉菜单使用has-dropdown和is-hoverable类构建；自定义样式推荐通过SASS变量覆盖实现主题调整。
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结构准备：
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情 在
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变量或更精确的选择器来解决。
通过这三种方法结合使用，你几乎可以实现任何你想要的导航菜单样式和布局。我的经验是，从SASS变量开始，然后根据需要逐步引入辅助类和自定义CSS，这样能保持代码的整洁和可维护性。
以上就是如何用css框架Bulma实现导航菜单的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1060114.html
微信扫一扫 
支付宝扫一扫 
