我是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”。我还是建议您深入研究文档

09-30 16:13
查看更多