我正在尝试在buls css上使用汉堡包菜单，但是它不起作用.怎么了? [英] I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?
问题描述
我是bulma CSS的新手， http://bulma.io/
I'm new on bulma css http://bulma.io/
我正在尝试为移动用户使用汉堡菜单. 我只是按照此页面上的说明进行操作: http://bulma.io/documentation/components/nav/
I'm trying to use hamburger menu for mobile user. I just followed instruction on this page: http://bulma.io/documentation/components/nav/
但是它不起作用.我应该添加什么?
But it doesn't work. What should I add ?
实际上，我可以看到汉堡菜单，但是当我单击它时它不起作用.
谢谢.
<!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>
推荐答案
文档中给出的示例可能存在问题，我可以通过向.nav-toggle和.nav-添加ID来使其正常工作菜单.
This may be an issue with the example given in the docs, I was able to get it working by adding ids to the .nav-toggle and .nav-menu.
<span id="nav-toggle" class="nav-toggle">和<div id='nav-menu' class="nav-right nav-menu">
jsfiddle 此处.
因此，要使示例正常工作，您必须在相应的元素中添加"id".我还是建议您深入研究文档
So to get the example working, you'd have to add 'id's to the respective elements. I'd recommend deep diving into the docs though
这篇关于我正在尝试在buls css上使用汉堡包菜单，但是它不起作用.怎么了?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
