24

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

10 に答える 10

5 
(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');
    });
})();
于 2017-07-04T05:12:03.383 に答える
3

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

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

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

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

于 2016-12-24T18:21:21.720 に答える
0

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 スニペットをファイルの最後に追加します (注: 何も変更する必要はありません)。

<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

于 2020-09-15T17:16:25.133 に答える