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

Posted 2023-02-23

【中文标题】布尔玛汉堡菜单不显示项目

【英文标题】：Bulma hamburger menu doesn't show items

【发布时间】：2020-09-10 01:34:42

【问题描述】：

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

回答以下...

【参考方案1】：

文档没有明确说明navbar-burger 和navbar-menu 类都需要切换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。如果使用 vanilla JS，只需按 ID 获取 2 个元素并以编程方式更改它们的类。

【讨论】：

Bulma 已经提到了这个in the docs 并提供了 jQuery 和 Vanilla JS 实现：“Bulma 包没有附带任何 javascript。但是这里是一个实现示例，它切换类是 -在 navbar-burger 和目标导航栏菜单上都处于活动状态，使用 Vanilla Javascript。”。我看不出这里有什么不清楚的地方......

“基本导航栏”和“导航栏汉堡”都不包含该信息。 “导航栏汉堡”部分仅包含您可以添加 is-active 以将其变成十字形的信息。对我个人而言，这并不简单