bulma 导航栏菜单在移动设备上默认打开

Question

我有一个 bulma 导航栏，我正在使用 React 进行操作。下面是生成的代码。在桌面上，菜单正确显示并按预期打开和关闭下拉菜单。

但在移动设备上，默认情况下所有下拉菜单都是打开的，虽然 class "is-active" 在我单击 "navbar-link" 时被添加和删除，但菜单没有打开并且按预期关闭。

<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      </a>
   </div>
   <div id="navbar" class="navbar-menu is-active">
      <div class="navbar-start">

         <div class="navbar-item has-dropdown">
            <a class="navbar-link">Data Types</a>
            <div class="navbar-dropdown">
               <div class="types">
                  Select Content
               </div>
            </div>
         </div>
      </div>
   </div>
</nav>

上面代码中的"is-active"是从汉堡菜单打开菜单。我究竟做错了什么？

Answer 1

我需要添加 sass

.navbar-item {
    &.has-dropdown {
      .navbar-dropdown {
        display: none;
      }
      &.is-active {
        .navbar-dropdown {
          display: block;
        }
      }
   }
}

在我的 sass 中的@mobile 下。然后手机的行为就像桌面一样。

Answer 2

css 代码仅隐藏下拉链接，但您无法再在移动设备上访问它们。

Answer 3

我也遇到过这个问题，所以决定试试 Buefy。这不完全是一个纯粹的 Bulma 答案，但默认情况下它可以被认为是接近的并且它是第一次工作。

我正在使用 Nuxt，最初使用 Bulma 作为 nuxtjs 模块，installation/conversion 从 Bulma 到 Buefy 很简单：https://buefy.org/documentation/start/#nuxtjs.

为了进行全新的集成，我从 nuxt-config 中删除了 Bulma 模块，删除了 node_modules/package-lock。json，并遵循了上述指南。

我根据我的要求调整了 Buefy Navbar component，它正常工作 - shows/hides 下拉列表正确 - 它还自动添加了正确的 Aria 属性：

  <template>
  <b-navbar>
    <template slot="brand">
      <h1>
        <nuxt-link to="/" class="navbar-item is-size-4" id="homelink">
          Brand link here
        </nuxt-link>
      </h1>
    </template>

    <template slot="end">
      <b-navbar-item tag="div">
        <div class="buttons">
          <nuxt-link class="navbar-item" to="/projects">Projects</nuxt-link>
          <nuxt-link class="navbar-item" to="/about">About/Contact</nuxt-link>
        </div>
      </b-navbar-item>
    </template>
  </b-navbar>
</template>

Answer 4

这对我来说就像一个魅力--->

        /** The jQuery will trigger only at mobile viewport */
    if (window.matchMedia("(max-width: 767px)").matches) {    
            const $navDropdowns = document.querySelectorAll(".navbar-item.has-dropdown");
        if ($navDropdowns.length > 0) {
            // HIDE THE DROP-DOWN ON THE INITIAL LOAD
            $navDropdowns.forEach((el) => {
                const target = el.dataset.target;
                const $target = document.getElementById(target);
                $target.style.display = "none";
        
            //Register the click event on the dropdown list
                el.addEventListener("click", () => {
                    // Get the target from the "data-target" attribute
                    const target = el.dataset.target;
                    const $target = document.getElementById(target);
    
                    if ($target.style.display === "block") {
                        $target.style.display = "none";
                    } else {
                        $target.style.display = "block";
                    }
                });
            });
        }
}

Collapsed Menu

Expanded Menu

这是导航栏的 HTML：

<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" @click="toggle" 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 data-target="more" class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        More
                    </a>

                    <div class="navbar-dropdown" id="more">
                        <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 data-target="new" class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        New
                    </a>

                    <div class="navbar-dropdown" id="new">
                        <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>

注意 data-target="more", data-target="new" 和子元素中传递的 id .顺便说一句，这是在 Vuejs 应用程序上的实现，但它适用于任何地方。

Answer 5

默认情况下，$navbar-breakpoint 设置为在 $desktop 处中断。

您可以在自己的 mystyles.scss 中覆盖您的初始 bulma 变量，就像 bulma 在此处描述的那样 https://versions.bulma.io/0.7.0/documentation/overview/customize/。如果您不希望它损坏，它可能看起来像这样：$navbar-breakpoint: 0px

bulma 导航栏菜单在移动设备上默认打开

bulma navbar menu open by default on mobile

html

css

bulma