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

我是 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>

原文由 moge 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 362

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

JS

首先，我为 Vue.js 添加了 cdn，可以在此处找到 https://unpkg.com/vue ，并在 javascript 中包含一个 Vue 实例。

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

HTML

一种。用元素“app”包裹导航部分以使其响应（这映射到 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 中包含了整个解决方案

原文由 tbonz 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

JS

HTML

解决方案

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译