我正在尝试在 bulma css 上使用汉堡菜单,但它不起作用。怎么了?
I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?
我是 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>
这可能是文档中给出的示例的问题,我可以通过将 id 添加到 .nav-toggle 和 .nav-menu 来使其正常工作。
<span id="nav-toggle" class="nav-toggle">
和 <div id='nav-menu' class="nav-right nav-menu">
jsfiddle 这里
因此,要使示例正常运行,您必须将“id”添加到各个元素。不过,我建议深入研究文档
您可以在不使用 jquery
或 bulma.js
的情况下使用它。只需使用您自己的 javascript 添加 is-active
到 nav-menu
class 点击 nav-toggle
.
nav-menu
已折叠。
nav-menu is-active
展开。
我认为有些人可能正在寻找没有 jquery 的解决方案,因此所有内容都集中在一个地方。
此解决方案使用 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 属性.
的结果反应性地更新 class 属性
<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
解决方案
我已将整个解决方案包含在此 jsfiddle
(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');
});
})();
有更简单的方法!在开始之前,您的 Html 似乎有一些问题。
第一期。您没有像文档建议的那样设置导航栏结构。如果您将 nav-left
替换为 navbar-brand
,它将为您处理一些 Html。在您的代码示例中,您的徽标是 nav-left
内的 nav-item
。 navbar-brand
正是这样做的。你在这里所做的可能有用,但我不确定那到底会做什么。来自文档:
"navbar-brand
the left side, always visible, which usually contains the logo and optionally some links or icons"
因此,如果您将其取出到容器的水平面并在其中,您可以将徽标放在第一个 navbar-item
内。接下来是拉动“navbar-burgerinside of the
navbar-brand”。
"The navbar-burger
is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand."
设置完成后,您需要将要折叠的菜单项放入 navbar-menu
。这个容器应该是 navbar-brand
的兄弟,所以它们应该在同一层。所以你的代码(在你的容器 div 中)应该看起来像这样:
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="../assets/icon.png" alt="something">
</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 代码应该 可以工作!
我知道这个问题很久以前就被问过了,但我希望这能对某人有所帮助。
我简单但实用的答案:
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>
要使切换点击事件起作用,只需添加以下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 页面的末尾添加脚本。
前任:
<script async type="text/javascript" src="./js/bulma.js"></script>
这是一个 angular 解决方案:
模板 - 按钮(注意最后两行)
<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">
component(注意 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() {}
}
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 片段添加到文件末尾(注意:您无需更改任何内容):
<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
我和 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 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>
这可能是文档中给出的示例的问题,我可以通过将 id 添加到 .nav-toggle 和 .nav-menu 来使其正常工作。
<span id="nav-toggle" class="nav-toggle">
和 <div id='nav-menu' class="nav-right nav-menu">
jsfiddle 这里
因此,要使示例正常运行,您必须将“id”添加到各个元素。不过,我建议深入研究文档
您可以在不使用 jquery
或 bulma.js
的情况下使用它。只需使用您自己的 javascript 添加 is-active
到 nav-menu
class 点击 nav-toggle
.
nav-menu
已折叠。
nav-menu is-active
展开。
我认为有些人可能正在寻找没有 jquery 的解决方案,因此所有内容都集中在一个地方。
此解决方案使用 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 属性.
的结果反应性地更新 class 属性<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
解决方案
我已将整个解决方案包含在此 jsfiddle
(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');
});
})();
有更简单的方法!在开始之前,您的 Html 似乎有一些问题。
第一期。您没有像文档建议的那样设置导航栏结构。如果您将 nav-left
替换为 navbar-brand
,它将为您处理一些 Html。在您的代码示例中,您的徽标是 nav-left
内的 nav-item
。 navbar-brand
正是这样做的。你在这里所做的可能有用,但我不确定那到底会做什么。来自文档:
"
navbar-brand
the left side, always visible, which usually contains the logo and optionally some links or icons"
因此,如果您将其取出到容器的水平面并在其中,您可以将徽标放在第一个 navbar-item
内。接下来是拉动“navbar-burgerinside of the
navbar-brand”。
"The
navbar-burger
is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand."
设置完成后,您需要将要折叠的菜单项放入 navbar-menu
。这个容器应该是 navbar-brand
的兄弟,所以它们应该在同一层。所以你的代码(在你的容器 div 中)应该看起来像这样:
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="../assets/icon.png" alt="something">
</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 代码应该 可以工作!
我知道这个问题很久以前就被问过了,但我希望这能对某人有所帮助。
我简单但实用的答案:
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>
要使切换点击事件起作用,只需添加以下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');
});
})();
<script async type="text/javascript" src="./js/bulma.js"></script>
这是一个 angular 解决方案:
模板 - 按钮(注意最后两行)
<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">
component(注意 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() {}
}
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 片段添加到文件末尾(注意:您无需更改任何内容):
<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
我和 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');
}}
我希望这段代码对某人有所帮助。