Html I'；我试图在bulma css上使用汉堡包菜单，但它没有'；不行。怎么了？_Html_Css_Nav_Bulma

Html I'；我试图在bulma css上使用汉堡包菜单，但它没有'；不行。怎么了？

html css

Html I'；我试图在bulma css上使用汉堡包菜单，但它没有'；不行。怎么了？,html,css,nav,bulma,Html,Css,Nav,Bulma,我是bulma css的新手我正在尝试为移动用户使用汉堡包菜单。我只是按照这一页上的说明：但它不起作用。我应该补充什么实际上，我可以看到汉堡包菜单，但当我点击它时，它不起作用。多谢各位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, i

我是bulma css的新手

我正在尝试为移动用户使用汉堡包菜单。我只是按照这一页上的说明：

但它不起作用。我应该补充什么

实际上，我可以看到汉堡包菜单，但当我点击它时，它不起作用。

多谢各位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
        <title>test</title>

        <link rel="stylesheet" href="css/bulma.min.css">
        <link rel="stylesheet" href="css/custom.css">
    </head>
    <body>
        <section class="hero is-fullheight is-primary is-bold">
            <!-- Hero header: will stick at the top -->
            <div class="hero-head">
                <header class="nav">
                    <div class="container">
                        <div class="nav-left">
                            <a class="nav-item" href="/">
                                <img src="img/logo.png" alt="Logo">
                            </a>
                        </div>
                        <span class="nav-toggle">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                        <div class="nav-right nav-menu">
                            <a class="nav-item" href="/about">
                                About
                            </a>
                            <a class="nav-item" href="/path">
                                Path
                            </a>
                            <a class="nav-item" href="/blog">
                                Blog
                            </a>
                        </div>
                    </div>
                </header>
            </div>
            <!-- Hero content: will be in the middle -->
            <div class="hero-body">
                <div class="container has-text-centered">
                </div>
            </div>
        </section>
    </body>
</html>


测试

这可能是文档中给出的示例的一个问题，我可以通过向.nav切换和.nav菜单添加ID使其正常工作

和

在这里

因此，要使示例正常工作，您必须向相应的元素添加'id'。我建议您深入研究这些文档，尽管您可以在不使用

jquery

或

bulma.js

的情况下使其正常工作。只需使用您自己的javascript将

处于活动状态

添加到

导航菜单

类，然后单击

导航切换

nav菜单

已折叠

导航菜单处于活动状态

已展开

我想有些人可能正在寻找一个没有jquery的解决方案，这样所有东西都可以放在一个地方。

此解决方案使用Vue.js在移动设备上查看时切换bulma导航组件。我希望这能帮助其他正在寻找替代解决方案的人

JS 首先，我添加了Vue.js的cdn，可以在这里找到，并在javascript中包含一个Vue实例

new Vue({
  el: '#app',
  data: {
    showNav: false
  }
});

HTML a。用元素“app”包裹nav部分，使其具有反应性（这将映射到Vue实例的“el”属性）

。。。

b。使用v-on:指令更新.navbar-burger以侦听click事件并切换数据属性showNav

<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">

c。使用v-bind:指令更新.navbar菜单，以使用showNav属性的结果反应性地更新class属性

<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">

解决方案

我已将整个解决方案包括在本文件中，有一种更简单的方法！在我开始之前，您的Html似乎有一些问题

第一期。您没有像文档建议的那样设置导航栏结构。如果您将

nav left

替换为

navbar品牌

，它将为您处理一些Html。在代码示例中，您的徽标作为

nav项

位于

nav left

的内部<代码>导航栏品牌正是这样做的。你在这里所做的可能会奏效，但我不确定那会有什么作用。从文件中：

navbar brand

左侧，始终可见，通常包含徽标和一些链接或图标

因此，如果您将其取出到容器的级别，并将其放入容器中，您只需将徽标放入第一个

导航栏项中即可。下一件事是在

navbar品牌的内部推出“navbar汉堡”

“navbar burger的

navbar burger

是一个汉堡包菜单，仅在手机上显示。它必须显示为navbar品牌的最后一个子菜单。”

设置好后，您需要将要折叠的菜单项放入

导航栏菜单中。此容器应该是navbar品牌的同级产品
，因此它们应该位于同一级别。因此，您的代码（在容器div中）应该如下所示：

我简单而实用的答案：
function toggleBurger() {
    var burger = $('.burger');
    var menu = $('.navbar-menu');
    burger.toggleClass('is-active');
    menu.toggleClass('is-active');
}

在汉堡标签上：
<div class="navbar-burger burger" data-target="navMenu" onclick="toggleBurger()">
            <span></span>
            <span></span>
            <span></span>
        </div>

要使切换单击事件生效，只需添加以下js代码。您可以创建一个JS文件夹，然后创建bulma.JS文件

//来源：https://gist.github.com/Bradcomp/a9ef2ef322a8e8017443b626208999c1
（功能（）{
var burger=document.querySelector（'.burger'）；
var menu=document.querySelector（“#”+burger.dataset.target）；
burger.addEventListener（'click'，函数（）{
burger.classList.toggle（'is-active'）；
menu.classList.toggle（'is-active'）；
});
})();这是一个角度解决方案：
模板-按钮（注意最后两行）
bulma包不提供任何javascript。所以你必须自己写。但是你不需要任何花哨的东西。只需使切换元素的id
与汉堡的数据目标
相同即可。大概是这样的：
这对于bulma css来说应该是开箱即用的。请检查缩小的css文件是否位于正确的路径。您也可以使用CDN选项。bulma的CDN链接是。嗯，我相信这是正确的路径。另外，我也试过CDN，它对我不起作用。我已经试过了，但它不起作用。我想知道的是，我应该导入的文件只是bulma.css？我是说我想我应该导入jquery之类的东西。。您应该导入jquery和bulma.js。导航的点击事件在bulma.jsf中。最后，它起作用了！！谢谢。我误解了bulma css是有效的，只有cssI做到了！非常感谢：）遗憾的是，您的示例依赖于jQuery。虽然这段代码可以回答这个问题，但提供有关它如何和/或为什么解决问题的附加上下文将提高答案的准确性
function toggleBurger() {
    var burger = $('.burger');
    var menu = $('.navbar-menu');
    burger.toggleClass('is-active');
    menu.toggleClass('is-active');
}

<div class="navbar-burger burger" data-target="navMenu" onclick="toggleBurger()">
            <span></span>
            <span></span>
            <span></span>
        </div>

<a
    role="button"
    class="navbar-burger burger"
    aria-label="menu"
    aria-expanded="false"
    data-target="navbarBasicExample"
    [class.is-active]="showBurgerMenu"
    (click)="showBurgerMenu = !showBurgerMenu">

<div 
    id="navbarBasicExample" 
    class="navbar-menu" 
    [class.is-active]="showBurgerMenu">

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.sass']
})
export class NavbarComponent {
    showBurgerMenu: boolean;
    constructor() {}

}