web-dev-qa-db-ja.com

bulma cssでハンバーガーメニューを使用しようとしていますが、機能しません。なにが問題ですか？

私はbulma cssが初めてです http://bulma.io/

モバイルユーザー用にハンバーガーメニューを使用しようとしています。このページの指示に従いました： 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>
htmlcssnavbulma
15
moge

これは、ドキュメントに記載されている例の問題である可能性があります。IDを.nav-toggleおよび.nav-menuに追加することで機能させることができました。

<span id="nav-toggle" class="nav-toggle">および<div id='nav-menu' class="nav-right nav-menu">

jsfiddle こちら。

したがって、サンプルを機能させるには、それぞれの要素に「id」を追加する必要があります。しかし、ドキュメントを深く掘り下げることをお勧めします

7
semuzaboi

このソリューションでは、Vue.jsを使用して、モバイルで表示するときにbulma navコンポーネントを切り替えます。これが、代替ソリューションを探している他の人に役立つことを願っています。

JS

最初に、ここにあるVue.jsのcdnを追加します https://unpkg.com/vue 、javascriptにVueのインスタンスを含めます。

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

HTML

a。 navセクションを要素「app」でラップして、リアクティブにします（これはVueインスタンス）の「el」プロパティにマップします）。

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

b。 v-on：ディレクティブを使用して.navbar-burgerを更新し、クリックイベントをリッスンし、データプロパティshowNavを切り替えます。

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

c。 v-bind：ディレクティブを使用して.navbar-menuを更新し、showNavプロパティの結果でクラス属性を事後的に更新します。

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

溶液

これにソリューション全体を含めました jsfiddle

22
tbonz
(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');
    });
})();
3
Ruggero Rebellato

jqueryまたはbulma.jsを使用せずに動作させることができます。独自のjavascriptを使用して、is-activeをクリックしてnav-menuクラスにnav-toggleを追加するだけです。

nav-menuは折りたたまれています。

nav-menu is-activeが展開されます。

私は誰かがjqueryなしで解決策を探しているかもしれないと思ったので、1箇所にすべてがあるでしょう。

2
Morishiri

angularソリューション：

テンプレート-ボタン（最後の2行に注意してください）

<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() {}

}
1
Riscie

もっと簡単な方法があります！話を始める前に、Htmlにいくつかの問題があるようです。

創刊。ドキュメントに示されているようなnavbar構造は設定されていません。 nav-leftをnavbar-brandに置き換えると、Htmlの一部が自動的に処理されます。コード例では、nav-itemの中にnav-leftとしてロゴがあります。 navbar-brandはまさにそれを行います。ここで行ったことはうまくいくかもしれませんが、それが何をするのか正確にはわかりません。ドキュメントから：

「navbar-brand左側、常に表示され、通常はロゴとオプションでいくつかのリンクまたはアイコンが含まれています」

したがって、それをコンテナのレベルまで取り出し、その中に入れると、最初のnavbar-itemの中にロゴを入れることができます。次に、「navbar-burgerinside of thenavbar-brand」をプルします。

「navbar-burgerは、モバイルでのみ表示されるハンバーガーメニューです。navbar-brandの最後の子として表示する必要があります。」

それが設定されたら、折りたたむメニュー項目を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 Docshttp://bulma.io/documentation/components/navbar/

1
AndyBobandy

私のシンプルだが機能的な答え：

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>
1
Erich García

トグルクリックイベントを機能させるには、以下の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');
    });
})();
<script async type="text/javascript" src="./js/bulma.js"></script>
0
Fahtima