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

Question

提问by moge

I'm trying to use hamburger menu for mobile user. I just followed instruction on this page: http://bulma.io/documentation/components/nav/

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

But it doesn't work. What should I add ?

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

Actually, I can see hamburger menu, but it doesn't work when I am click it.

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

Thank you.

谢谢你。

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

采纳答案by semuzaboi

This may be an issue with the example given in the docs, I was able to get it working by adding ids to the .nav-toggle and .nav-menu.

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

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

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

jsfiddle here.

jsfiddle在这里。

So to get the example working, you'd have to add 'id's to the respective elements. I'd recommend deep diving into the docs though

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

Answer 2

回答by tbonz

This solution uses Vue.js to toggle the bulma nav component when viewing on mobile. I hope this helps others that are looking for an alternative solution.

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

JS

First, I add the cdn for Vue.js which can be found here https://unpkg.com/vue, and include an instance of Vue in the javascript.

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

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

HTML

a. Wrap the nav section with the element "app" to make it reactive (this maps to the "el" property of the Vue instance).

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

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

b. Update .navbar-burger using the v-on: directive to listen for the click event and toggle the data property showNav.

湾使用 v-on: 指令更新 .navbar-burger 以监听点击事件并切换数据属性 showNav。

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

c. Update .navbar-menu using the v-bind: directive to reactively update the class attribute with the result of the showNav property.

C。使用 v-bind: 指令更新 .navbar-menu 以使用 showNav 属性的结果被动地更新 class 属性。

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

Solution

解决方案

I've included the entire solution in this jsfiddle

我已经在这个jsfiddle 中包含了整个解决方案

Answer 3

回答by Morishiri

You can get it to work without using jqueryor bulma.js. Just simply use your own javascript to add is-activeto nav-menuclass on click on nav-toggle.

您可以在不使用jquery或的情况下使其工作bulma.js。只需简单地使用您自己的 javascript在单击时添加is-active到nav-menu类nav-toggle。

nav-menuis collapsed.

nav-menu倒塌了。

nav-menu is-activeis expanded.

nav-menu is-active被扩展。

I thought someome might be looking for a solution without jquery so there will be everything in one place.

我认为有些人可能正在寻找没有 jquery 的解决方案，因此所有内容都集中在一个地方。

Answer 4

回答by Ruggero Rebellato

(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 5

回答by AndyBobandy

There is an easier way! Before I get to that, it looks like there are a few problems with your Html.

有更简单的方法！在我开始之前，您的 Html 似乎存在一些问题。

First issue. You don't have the navbar structure set up like the documentation suggests. If you replace the nav-leftwith navbar-brandit will take care of some of your Html for you. In your code example, you have your logo as a nav-iteminside of a nav-left. navbar-branddoes exactly that. What you've done here may work but, I'm not sure exactly what that would do. From the documentation:

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

"navbar-brandthe left side, always visible, which usually contains the logo and optionally some links or icons"

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

So if you take that out to the level of the of the container and within that, you can just put your logo inside the first navbar-item. Next thing is to pull the 'navbar-burgerinside of thenavbar-brand`.

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

"The navbar-burgeris a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand."

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

Once that is set up you'll want to put the menu items you wish to collapse inside of the navbar-menu. This container should be a sibling of the navbar-brandso they should be on the same level together. So your code (within your container div) should look something LIKE SO:

设置完成后，您需要将要折叠的菜单项放在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>

The final piece to the puzzle is: you gotta set the data-targetof your burger to the the id of the navbar-menu. It's not very clear that's what they are talking about in the docs. Whatever the case, after you make those changes, the javascript code from the documentation shouldwork!

拼图的最后一部分是：您必须将data-target汉堡的设置为的 ID navbar-menu。不太清楚这就是他们在文档中谈论的内容。无论如何，在您进行这些更改后，文档中的 javascript 代码应该可以工作！

I realize that this question was asked many moons ago but I hope this can help SOMEONE.

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

Bulma Docshttp://bulma.io/documentation/components/navbar/

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

Answer 6

回答by Erich García

My simple but functional answer:

我简单但实用的答案：

function toggleBurger() {
    var burger = $('.burger');
    var menu = $('.navbar-menu');
    burger.toggleClass('is-active');
    menu.toggleClass('is-active');
}

And in the burger tag:

在汉堡标签中：

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

Answer 7

回答by Fahtima

To make the toggle click event work, just add the below js code. You may create a JS folder, then bulma.jsfile.

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

// 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');
    });
})();

在 html 页面的末尾添加脚本。前任：

<script async type="text/javascript" src="./js/bulma.js"></script>

Answer 8

回答by Riscie

Here is an angular solution:

这是一个角度解决方案：

template - button(notice the last two lines)

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

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

template - menu(notice the last line)

模板 - 菜单（注意最后一行）

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

component(notice the showBurgerMenu property)

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

}

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

提问by moge

采纳答案by semuzaboi

回答by tbonz

JS

JS

HTML

HTML

Solution

解决方案

回答by Morishiri

回答by Ruggero Rebellato

回答by AndyBobandy

回答by Erich García

回答by Fahtima

回答by Riscie

相关推荐

最近更新

标签

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

提问by moge

采纳答案by semuzaboi

回答by tbonz

JS

JS

HTML

HTML

Solution

解决方案

回答by Morishiri

回答by Ruggero Rebellato

回答by AndyBobandy

回答by Erich García

回答by Fahtima

回答by Riscie

相关推荐

水印文本对角重复css/html

Html 页面底部的 Bootstrap 页脚

在没有 jQuery 的 HTML 和 CSS 中单击时显示隐藏 div

从 Angular 2 打字稿中的 HTML 获取复选框值。

相关推荐

最近更新

标签