logo标签列表

我正在尝试在Bulma CSS中使用汉堡菜单，但它不起作用。有什么问题吗？

htmlcssnavbulma
28

我在学习使用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>
这应该可以直接在bulma css中使用。请检查您是否在正确的路径上有压缩的css文件。您也可以使用CDN选项。bulma的CDN链接在这里。 - Parthipan Natkunam
嗯，我确定这是正确的路径。此外，我还尝试了CDN，但对我来说没有用。 - moge
12个回答
0
如果您的项目使用SCSS和purge-css等工具，请确保.css-purging不删除.is-active类。对我来说，原始示例有效：

JS： 

document.addEventListener("DOMContentLoaded", () => {
  // Get all "navbar-burger" elements
  const $navbarBurgers = Array.prototype.slice.call(
    document.querySelectorAll(".navbar-burger"),
    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");
    });
  });
});

以及HTML：

<nav class="navbar headnavi is-fixed-top" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="{{ site.url }}">
      <span class="is-size-3 is-size-5-mobile has-text-weight-semibold ml-2">{{ site.name }}</span>
    </a>

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

  <div id="top" class="navbar-menu">
    <div class="navbar-start">
    </div>

    <div class="navbar-end">
    <a class="navbar-item">
        Home
      </a>
    
      <a class="navbar-item">
        Documentation
      </a>
    
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" href="/">
          More
        </a>
    
        <div class="navbar-dropdown is-right">
          <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 class="navbar-item">
        <div class="buttons">
        </div>
      </div>
    </div>
  </div>
</nav>
0

我在使用Vue.js时遇到了同样的问题，我是这样解决的：

<span class="navbar-burger burger" data-target="navbarMenu" @click="show()">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                </div>
                <div id="navbarMenu" class="navbar-menu">
                    <div class="navbar-end">
                        <div class="tabs is-right">
                            <ul>
                                <li><a>Home</a></li>
                                <li><a href="">Examples</a></li>
                                <li><a href="">Features</a></li>
                                <li><a href="">Team</a></li>
                                <li><a href="">Help</a></li>
                            </ul>
                        </div>
                    </div>
                </div> </span>

接着我在方法部分添加了这段代码：

methods:{
show()
{
  var burger = document.querySelector('.burger');
  var menu = document.querySelector('.navbar-menu');
  burger.classList.toggle('is-active');
  menu.classList.toggle('is-active');
}}

我希望这段代码能帮助到某个人。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接