我是 bulma css 新手http://bulma.io/ http://bulma.io/
我正在尝试为移动用户使用汉堡菜单。
我只是按照此页面上的说明进行操作：http://bulma.io/documentation/components/nav/ 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>
该解决方案使用 Vue.js 在移动设备上查看时切换 bulma nav 组件。我希望这可以帮助其他正在寻找替代解决方案的人。
JS
首先，我添加 Vue.js 的 CDN，可以在此处找到https://unpkg.com/vue https://unpkg.com/vue，并在 javascript 中包含 Vue 实例。
new Vue({
el: '#app',
data: {
showNav: false
}
});
HTML
A。用元素“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 }">
Solution
我已将整个解决方案包含在其中jsfiddle https://jsfiddle.net/tbonz/80jkq0Ls/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
