我正在尝试在 bulma css 上使用汉堡菜单,但它不起作用。怎么了?

Posted

技术标签:

【中文标题】我正在尝试在 bulma css 上使用汉堡菜单,但它不起作用。怎么了?【英文标题】:I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong? 【发布时间】:2017-04-29 11:01:29 【问题描述】:

我是 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" >
                            </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 链接是here。 嗯,我确定这是正确的路径。另外,我也试过CDN,对我没用。 【参考方案1】:

此解决方案使用 Vue.js 在移动设备上查看时切换 bulma nav 组件。我希望这可以帮助其他正在寻找替代解决方案的人。

JS

首先,我添加 Vue.js 的 cdn,可以在这里找到 https://unpkg.com/vue,并在 javascript 中包含一个 Vue 实例。

new Vue(
  el: '#app',
  data: 
    showNav: false
  
);

HTML

一个。用元素“app”包裹 nav 部分以使其具有响应性(这映射到 Vue 实例的“el”属性)。

<div id="app"> ... </div>

b.使用 v-on: 指令更新 .navbar-burger 以监听点击事件并切换数据属性 showNav。

<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class=" 'is-active' : showNav ">

c。使用 v-bind: 指令更新 .navbar-menu 以使用 showNav 属性的结果反应性地更新类属性。

<div class="navbar-menu" v-bind:class=" 'is-active' : showNav ">

解决方案

我已将整个解决方案包含在此jsfiddle

【讨论】:

从 google 来到这里并想添加到您的答案中,因为 nav 将很快在 Bulma 上被弃用。如果您使用navbar 示例,只需将:class=" 'is-active': showNav " @click="showNav = !showNav" 添加到navbar-burger 标签,并将:class=" 'is-active': showNav " 添加到navbar-menu 谢谢@JeffBeltran!我更新了我的 solution 以使用最新版本的 bulma.css 和导航栏组件。 您能否在您的解决方案中添加使导航栏在单击时向下滑动?我尝试在 navbar-menu 周围添加一个转换包装器,但似乎无法使其工作。 @doublea 我试图添加这个,但发现您不能将过渡应用于具有display: none 的元素。 CSS 不是我的强项,所以希望其他人可以提供解决方案。 感谢您的回答。使用它,我能够调整我在下面发布的角度逻辑。【参考方案2】:

这可能是文档中给出的示例的问题,我可以通过向 .nav-toggle 和 .nav-menu 添加 id 来使其正常工作。

&lt;span id="nav-toggle" class="nav-toggle"&gt;&lt;div id='nav-menu' class="nav-right nav-menu"&gt;

jsfiddle 在这里。

因此,要使示例正常运行,您必须将“id”添加到相应的元素中。我建议深入研究文档

【讨论】:

我已经试过了,但是没有用。我想知道的是我应该导入的文件只有 bulma.css 吗?我的意思是我认为我应该导入 jquery 或其他东西。 好吧.. 你应该导入 jquery 和 bulma.js 。导航的点击事件在 bulma.js 终于成功了!!非常感谢。我误解了 bulma css 只能使用 css 我做到了!非常感谢:) 可惜你的例子依赖于jQuery。【参考方案3】:
(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');
    );
)();

【讨论】:

虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。 哦,对不起,刚刚开始帮助这里的人......所以我会尝试为任何人解释(考虑长期):我们需要查询(还记得 jQuery 吗?不需要使用它)导航工具和导航菜单,将它们存储在变量中(阅读参考类型),然后开始监听“汉堡”上的事件,在这种情况下,鼠标点击或触摸屏幕。当点击发生时,它将切换类“活动”。这个函数是一个自执行函数,也就是说它是从页面加载的那一刻开始执行的。 @RuggeroRebellato:为什么要使用立即调用的功能表达式 (IIFE)?页面加载后,它的使用是否允许此功能?在这种情况下,为什么不直接使用 onLoad/load 事件监听器呢?【参考方案4】:

您可以在不使用jquerybulma.js 的情况下使其工作。只需简单地使用您自己的 javascript 添加 is-activenav-menu 类点击 nav-toggle

nav-menu 已折叠。

nav-menu is-active 已展开。

我认为有些人可能正在寻找一个没有 jquery 的解决方案,以便将所有东西放在一个地方。

【讨论】:

【参考方案5】:

要使切换点击事件起作用,只需添加以下 js 代码。您可以创建一个 JS 文件夹,然后创建 bulma.js 文件。

// source: https://gist.github.com/Bradcomp/a9ef2ef322a8e8017443b626208999c1
(function () 
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('#' + burger.dataset.target);
    burger.addEventListener('click', function () 
        burger.classList.toggle('is-active');
        menu.classList.toggle('is-active');
    );
)();
在您的 html 页面的末尾添加脚本。 前任:
&lt;script async type="text/javascript" src="./js/bulma.js"&gt;&lt;/script&gt;

【讨论】:

【参考方案6】:

有一个更简单的方法!在此之前,您的 Html 似乎存在一些问题。

第一期。您没有像文档建议的那样设置导航栏结构。如果您将nav-left 替换为navbar-brand,它将为您处理一些Html。在您的代码示例中,您的徽标是nav-itemnav-left 内。 navbar-brand 正是这样做的。你在这里所做的可能会奏效,但我不确定那会做什么。来自文档:

"navbar-brand 左侧,始终可见,通常包含徽标以及可选的一些链接或图标"

因此,如果您将其取出到容器的级别并在其中,您可以将您的徽标放在第一个 navbar-item 中。接下来就是拉取'navbar-burgerinside of thenavbar-brand`。

navbar-burger 是仅在移动设备上出现的汉堡菜单。它必须作为 navbar-brand 的最后一个子项出现。

设置完成后,您需要将要折叠的菜单项放在navbar-menu 中。这个容器应该是navbar-brand 的兄弟,所以它们应该在同一级别。所以你的代码(在你的容器 div 中)应该看起来像这样:

<nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img src="../assets/icon.png" >
      </a>

      <div class="navbar-burger burger" data-target="Options">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div class="navbar-menu" id="Options">
      <div class="navbar-end">
        <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>
  </nav>

难题的最后一块是:您必须将汉堡的data-target 设置为navbar-menu 的id。这不是他们在文档中谈论的内容。无论如何,在您进行这些更改后,文档中的 javascript 代码应该工作!

我知道这个问题在很多个月前就被问过了,但我希望这可以帮助某人。

布尔玛文档 http://bulma.io/documentation/components/navbar/

【讨论】:

不幸的是,它没有,因为即使这样,它似乎也不起作用。恐怕布尔玛本身有问题。 @Okarin 嗯,我的作品仅适用于上述更改。我在处理这个问题时发现的另一个问题:我没有在 HTML 标头中设置我的视口元字段。如果您没有设置视口,则任何内置响应都将不起作用。尝试将此添加到您的 html 文件的标题中:html &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 不过,我必须查看您的代码才能真正帮助您。【参考方案7】:

我的简单但实用的答案:

function toggleBurger() 
    var burger = $('.burger');
    var menu = $('.navbar-menu');
    burger.toggleClass('is-active');
    menu.toggleClass('is-active');

在汉堡标签中:

<div class="navbar-burger burger" data-target="navMenu" onclick="toggleBurger()">
            <span></span>
            <span></span>
            <span></span>
        </div>

【讨论】:

【参考方案8】:

这是一个角度解决方案:

模板 - 按钮(注意最后两行)

<a
    role="button"
    class="navbar-burger burger"
    aria-label="menu"
    aria-expanded="false"
    data-target="navbarBasicExample"
    [class.is-active]="showBurgerMenu"
    (click)="showBurgerMenu = !showBurgerMenu">

模板 - 菜单(注意最后一行)

<div 
    id="navbarBasicExample" 
    class="navbar-menu" 
    [class.is-active]="showBurgerMenu">

组件(注意 showBurgerMenu 属性)

import  Component, OnInit  from '@angular/core';

@Component(
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.sass']
)
export class NavbarComponent 
    showBurgerMenu: boolean;
    constructor() 


【讨论】:

【参考方案9】:

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 sn-p 添加到文件末尾(注意:您无需更改任何内容):

<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

【讨论】:

【参考方案10】:

我在使用 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');

我希望这段代码对某人有所帮助。

【讨论】:

以上是关于我正在尝试在 bulma css 上使用汉堡菜单,但它不起作用。怎么了?的主要内容,如果未能解决你的问题,请参考以下文章

Bulma navbar-burger 未连接到 Vue.js 2 中的菜单项

如何在键盘可访问性焦点上关闭汉堡菜单

如何在键盘可访问性焦点上关闭汉堡菜单

您知道如何仅使用CSS在移动视图中制作汉堡菜单吗? [关闭]

css 在汉堡包菜单上添加“MENU”以获得全屏DIVI

在CSS问题中导航栏的汉堡包