mog*_*oge 16 html css nav bulma
我是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>
tbo*_*onz 25
此解决方案使用Vue.js在移动设备上查看时切换bulma nav组件.我希望这有助于其他寻求替代解决方案的人.
首先,我为vue.js添加了cdn,可以在这里找到https://unpkg.com/vue,并在javascript中包含一个Vue实例.
new Vue({
el: '#app',
data: {
showNav: false
}
});
一个.使用元素"app"包装nav部分以使其成为被动的(这映射到Vue实例的"el"属性).
<div id="app"> ... </div>
湾 使用v-on:指令更新.navbar-burger以侦听click事件并切换数据属性showNav.
<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">
C.使用v-bind:指令更新.navbar-menu,以使用showNav属性的结果来反应性地更新class属性.
<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
我在这个jsfiddle中包含了整个解决方案
小智 5
(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');
});
})();
| 归档时间： |
|
| 查看次数： |
21331 次 |
| 最近记录： |