web-dev-qa-db-fra.com

J'essaie d'utiliser le menu hamburger sur Bulma CSS, mais cela ne fonctionne pas. Qu'est-ce qui ne va pas?

Je suis nouveau sur bulma css http://bulma.io/

J'essaie d'utiliser le menu hamburger pour un utilisateur mobile ..__ Je viens de suivre les instructions sur cette page: http://bulma.io/documentation/components/nav/

Mais ça ne marche pas. Que devrais-je ajouter?

En fait, je peux voir le menu hamburger, mais ça ne marche pas quand je clique dessus.

Je vous remercie.

<!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>
htmlcssnavbulma
10
moge

Cela peut être un problème avec l'exemple donné dans la documentation, j'ai pu le faire fonctionner en ajoutant des identifiants aux .nav-toggle et .nav-menu.

<span id="nav-toggle" class="nav-toggle"> et <div id='nav-menu' class="nav-right nav-menu">

jsfiddle ici.

Donc, pour que l'exemple fonctionne, vous devez ajouter des identifiants aux éléments respectifs. Je recommanderais la plongée profonde dans les docs bien

7
semuzaboi

Cette solution utilise Vue.js pour basculer le composant bulma nav lors de l'affichage sur mobile. J'espère que cela aidera les autres qui recherchent une solution alternative.

JS

Tout d’abord, j’ajoute le cdn de Vue.js qui se trouve ici https://unpkg.com/vue , et inclut une instance de Vue dans javascript.

new Vue({
  el: '#app',
  data: {
    showNav: false
  }
});

HTML

une. Enveloppez la section de navigation avec l'élément "app" pour la rendre réactive (cela correspond à la propriété "el" de l'occurrence Vue).

<div id="app"> ... </div>

b. Mettez à jour .navbar-burger à l'aide de la directive v-on: pour écouter l'événement click et basculer la propriété de données showNav.

<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">

c. Mettez à jour le menu .navbar à l'aide de la directive v-bind: pour mettre à jour de manière réactive l'attribut de classe avec le résultat de la propriété showNav.

<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">

Solution

J'ai inclus la solution complète dans ce jsfiddle

16
tbonz

Vous pouvez le faire fonctionner sans utiliser jquery ou bulma.js. Utilisez simplement votre propre javascript pour ajouter is-active à la classe nav-menu en cliquant sur nav-toggle.

nav-menu est réduit.

nav-menu is-active est développé.

Je pensais que quelqu'un cherchait peut-être une solution sans problème, il y aurait donc tout au même endroit.

2
Morishiri
(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');
    });
})();
2
Ruggero Rebellato

Il y a un moyen plus facile! Avant d’y arriver, il semble y avoir quelques problèmes avec votre code HTML. 

Premier numéro. La structure de la barre de navigation n’est pas configurée comme le suggère la documentation. Si vous remplacez le nav-left par le navbar-brand, il s'occupera de votre code HTML pour vous. Dans votre exemple de code, vous avez votre logo en tant que nav-item à l'intérieur d'un nav-left. navbar-brand fait exactement cela. Ce que vous avez fait ici peut fonctionner, mais je ne sais pas exactement ce que cela ferait. De la documentation:

"navbar-brand le côté gauche, toujours visible, qui contient généralement le logo et éventuellement des liens ou des icônes"

Donc, si vous prenez cela au niveau du conteneur et que, dans ce cas, vous pouvez simplement insérer votre logo dans le premier navbar-item. La prochaine chose à faire est de tirer le 'navbar-burgerinside of thenavbar-brand`.

"Le navbar-burger est un menu hamburger qui apparaît uniquement sur le mobile. Il doit apparaître comme le dernier enfant de navbar-brand."

Une fois que cela est configuré, vous voudrez mettre les éléments de menu que vous souhaitez réduire dans le navbar-menu. Ce conteneur doit être un frère du navbar-brand afin qu'ils soient au même niveau ensemble. Donc, votre code (dans votre conteneur div) devrait ressembler à quelque chose comme:

<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>

La dernière pièce du puzzle est la suivante: vous devez définir le data-target de votre burger sur l’identifiant du navbar-menu. Ce n'est pas très clair, c'est ce dont ils parlent dans les documents. Quoi qu’il en soit, après avoir apporté ces modifications, le code javascript de la documentation devrait fonctionne!

Je me rends compte que cette question a été posée il y a beaucoup de lunes mais j'espère que cela pourra aider quelqu'un. 

Bulma Docshttp://bulma.io/documentation/components/navbar/

1
AndyBobandy

Ma réponse simple mais fonctionnelle:

function toggleBurger() {
    var burger = $('.burger');
    var menu = $('.navbar-menu');
    burger.toggleClass('is-active');
    menu.toggleClass('is-active');
}

Et dans le tag burger:

<div class="navbar-burger burger" data-target="navMenu" onclick="toggleBurger()">
            <span></span>
            <span></span>
            <span></span>
        </div>
1
Erich García

Pour que l'événement bascule fonctionne, ajoutez simplement le code js ci-dessous. Vous pouvez créer un dossier JS, puis bulma.js file.

// 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');
    });
})();
A la fin de votre page html, ajoutez le script . Ex: 
<script async type="text/javascript" src="./js/bulma.js"></script>

0
Fahtima