布尔玛汉堡菜单不显示项目

Question

我正在使用 Bulma 作为我的 CSS 框架。我在制作汉堡菜单时遇到了问题。该文档不清楚整个事情应该如何运作。缩小屏幕时，我看到菜单从完整菜单正确地转换为 3 行，但我无法使其工作。

回答如下...

Answer 1

文档没有明确说明的是 navbar-burger 和 navbar-menu class 都需要切换 is-active 属性才能显示。

这是我在 Vue 中的工作解决方案，希望它对某人有所帮助：

<nav class="navbar is-info">
    <div class="navbar-brand">
        <a role="button" class="navbar-burger burger"
           :class="{ 'is-active': isHamburgerOpen }"
           @click="openHamburgerMenu"
           data-target="navMenu">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>
    <div id="navMenu"
         class="navbar-menu"
         :class="{ 'is-active': isHamburgerOpen }">
        <div class="navbar-end">
            <!-- menu content -->
        </div>
    </div>
</nav>

JS:

data() {
    return {
        isHamburgerOpen: false,
    }
},
methods : {
    openHamburgerMenu() {
        this.isHamburgerOpen = !this.isHamburgerOpen;
    }
}

无需使用jQuery。如果使用普通 JS，只需按 ID 获取 2 个元素并以编程方式更改它们的 class。

布尔玛汉堡菜单不显示项目

Bulma hamburger menu doesn't show items

css

vue.js

vuejs2

vue-component

bulma