Question

的新手

我正在尝试为移动用户使用汉堡包菜单。我刚按照此页面上的说明操作：http://bulma.io/documentation/components/nav/

但它不起作用。我应该添加什么？

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

谢谢。

<!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>

Answer 1

此解决方案使用Vue.js在移动设备上查看时切换bulma nav组件。我希望这有助于其他寻求替代解决方案的人。

JS

首先，我添加了可以在https://unpkg.com/vue找到的Vue.js的cdn，并在javascript中包含一个Vue实例。

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

HTML

一个。使用元素＆＃34; app＆＃34;包裹导航部分。使其成为被动的（这映射到Vue实例的＆＃34; el＆＃34;属性）。

<div id="app"> ... </div>

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

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

℃。使用v-bind：指令更新.navbar-menu，以使用showNav属性的结果来反应性地更新class属性。

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

解决方案

我在此jsfiddle

中包含了整个解决方案

Answer 2

这可能是文档中给出的示例的问题，我可以通过向.nav-toggle和.nav-menu添加id来使其工作。

<span id="nav-toggle" class="nav-toggle">和<div id='nav-menu' class="nav-right nav-menu">

jsfiddle 此处。

因此，要使示例正常工作，您必须将'id'添加到相应的元素中。我建议深入了解文档

Answer 3

(function() {
    var burger = document.querySelector('.nav-toggle');
    var menu = document.querySelector('.nav-menu');
    burger.addEventListener('click', function() {
        burger.classList.toggle('is-active');
        menu.classList.toggle('is-active');
    });
})();

Answer 4

您可以在不使用jquery或bulma.js的情况下使其发挥作用。只需使用您自己的javascript，点击is-active即可向nav-menu课程添加nav-toggle。

nav-menu已崩溃。

nav-menu is-active已展开。

我认为有些人可能会在没有jquery的情况下寻找解决方案，因此一切都会在一个地方。

Answer 5

有一种更简单的方法！在我开始之前，看起来你的Html存在一些问题。

第一期。您没有像文档建议那样设置导航栏结构。如果您将nav-left替换为navbar-brand，它会为您处理一些Html。在您的代码示例中，您将徽标作为nav-item内的nav-left。 navbar-brand正是这样做的。你在这里所做的可能会奏效，但我不确定那会是什么。来自文档：

“navbar-brand左侧，始终可见，通常包含徽标和可选的一些链接或图标”

因此，如果您将其取出到容器的级别并且在其中，您可以将徽标放在第一个navbar-item内。接下来就是拉动'navbar-burger inside of the navbar-brand`。

“navbar-burger是一个只出现在手机上的汉堡菜单。它必须显示为导航栏品牌的最后一个孩子。”

设置完成后，您需要将要折叠的菜单项放在navbar-menu内。这个容器应该是navbar-brand的兄弟，所以它们应该在同一级别上。因此，您的代码（在容器div中）应该看起来像是这样的东西：

<nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img src="../assets/icon.png" alt="something">
      </a>

      <div class="navbar-burger burger" data-target="Options">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div class="navbar-menu" id="Options">
      <div class="navbar-end">
        <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>
  </nav>

拼图的最后一部分是：你必须将汉堡的data-target设置为navbar-menu的id。现在还不是很清楚他们在文档中谈论的是什么。无论如何，在您进行这些更改后，文档中的javascript代码应工作！

我意识到这个问题在很多月前被问过，但我希望这可以帮助某人。

Bulma文档 http://bulma.io/documentation/components/navbar/

Answer 6

我简单而实用的答案：

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>

Answer 7

这是一个角度解决方案：

模板-按钮（请注意最后两行）

<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">

组件（请注意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() {}

}

Answer 8

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

hashmap

在html页面的末尾添加脚本。例如：

// source: https://gist.github.com/Bradcomp/a9ef2ef322a8e8017443b626208999c1
(function () {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('#' + burger.dataset.target);
    burger.addEventListener('click', function () {
        burger.classList.toggle('is-active');
        menu.classList.toggle('is-active');
    });
})();

Answer 9

bulma包不提供任何javascript。因此，您必须自己编写。但是您不需要任何花哨的东西。只需使切换元素的id和汉堡的data-target相同即可。像这样：

<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

<div class="navbar-menu" id="navMenu">
  <!-- navbar-start, navbar-end... -->
</div>

并将此javascript代码段添加到文件末尾（ note ：您无需更改任何内容）：

<script>
  document.addEventListener('DOMContentLoaded', () => {

    // Get all "navbar-burger" elements                                                              
   const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar- burger'), 0);

    // Check if there are any navbar burgers
    if ($navbarBurgers.length > 0) {

      // Add a click event on each of them
      $navbarBurgers.forEach( el => {
        el.addEventListener('click', () => {

          // Get the target from the "data-target" attribute
          const target = el.dataset.target;
          const $target = document.getElementById(target);
 
          // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
          el.classList.toggle('is-active');
          $target.classList.toggle('is-active');
  
        });
      });
    }  

  });
</script>

就是这样！可行！

这些代码块摘自文档：https://bulma.io/documentation/components/navbar/#navbar-burger

我正在尝试在bulma css上使用汉堡菜单，但它不起作用。怎么了？

9 个答案:

JS

HTML

解决方案