確認環境
Mac OS
Bulma
Laravel 5.7
XServer
レスポンシブ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でハンバーガーメニューが無事に表示されました。

参考:
Unable to get hero nav hamburger menu to work #238
ここからjquery CDNが入手できます。