我是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>
最佳答案
这可能与文档中给出的示例有关,我可以通过向.nav-toggle和.nav-menu中添加ID来使其正常工作。<span id="nav-toggle" class="nav-toggle">
和<div id='nav-menu' class="nav-right nav-menu">
jsfiddle 在这里。
因此,要使该示例正常工作,您必须在各个元素中添加“id”。我还是建议您深入研究文档