Bulmaのハンバーガーメニューが出ない

確認環境

Mac OS

Bulma

Laravel ５.７

XServer

XserverにLaravelをインストールしました。

レスポンシブWebサイトにしたいので、Bulma（ブーマ）を使ってみました。

しかし、navbarのハンバーガーメニューをクリックしてもメニューがなぜか表示されませんでした。

調べてみた結果、公式サイトでは、npmを使ってBulmaのパッケージをインストールすることを推奨しているのですが、私はこの方法でBulmaを使用していないので、どうもそれが原因みたいです。

なので、

以下のように修正してみました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <!--jquery cdn -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
      </a>

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

    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
          Home
        </a>

        <a class="navbar-item">
          Documentation
        </a>

        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            More
          </a>

          <div class="navbar-dropdown">
            <a class="navbar-item">
              About
            </a>
            <a class="navbar-item">
              Jobs
            </a>
            <a class="navbar-item">
              Contact
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
              Report an issue
            </a>
          </div>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light">
              Log in
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <!--
  Bulmaでハンバーガーメニューをクリックして表示されない
  たぶんnode.jsがインストールされていないため
  とりあえず、jqueryのcdnを使って、コードを追加しハンバーガーメニューを表示させる
  -->
  <script type="text/javascript">
    document.querySelector('.navbar-burger').addEventListener("click", toggleNav);

    function toggleNav() {
            var nav = document.querySelector('.navbar-menu');
            if(nav.className == "navbar-menu") {
                nav.className = "navbar-menu is-active";
            } else {
                nav.className = "navbar-menu";
            }
    }
  </script>

  </body>
</html>

ベースは

Bulma→Documentation→Overview→Start

に記載されている、

Starter template のコードを使います。

それと、

Bulma→Documentation→Component→Navbar

に記載されている、

Basic Navbar のコードを使います。

それから、

jquery CDNを追加し、

<!--jquery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

さらに、

以下のJavaScriptコードを追加します。

<!--
Bulmaでハンバーガーメニューをクリックして表示されない
たぶんnode.jsがインストールされていないため
とりあえず、jqueryのcdnを使って、コードを追加しハンバーガーメニューを表示させる
-->
  <script type="text/javascript">
    document.querySelector('.navbar-burger').addEventListener("click", toggleNav);

    function toggleNav() {
            var nav = document.querySelector('.navbar-menu');
            if(nav.className == "navbar-menu") {
                nav.className = "navbar-menu is-active";
            } else {
                nav.className = "navbar-menu";
            }
    }
  </script>

これでBulmaでハンバーガーメニューが無事に表示されました。

参考：

Bulma

Unable to get hero nav hamburger menu to work #238

Google Hosted Libraries

ここからjquery CDNが入手できます。