J'essaie d'utiliser le menu hamburger sur bulma css, mais ça ne marche pas. Quel est le problème?

cette solution utilise la Vue.js pour faire basculer l'bulma nav composant lors de l'affichage sur mobile. J'espère que cela aidera d'autres qui sont à la recherche d'une solution alternative.

JS

tout d'abord, j'ajoute le cdn pour Vue.js qui peut être trouvé ici https://unpkg.com/vue, et inclure une instance de Vue dans le javascript.

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

HTML

A. Envelopper la section nav avec l'élément "app" pour la rendre réactive (ceci correspond à la propriété" el " de la Vue est un exemple).

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

B. Mise à jour .navbar-burger en utilisant la directive v-on: pour écouter l'événement de clic 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. Mise à jour .navbar-menu utilisant la directive v-bind: pour réactualiser l'attribut class avec le résultat de la propriété showNav.

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

Solution

j'ai inclus toute la solution dans ce 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');
    });
})();

vous pouvez le faire fonctionner sans utiliser jquery ou bulma.js. Il suffit d'utiliser votre propre javascript pour ajouter is-activenav-menu classe sur cliquez sur nav-toggle.

nav-menu est effondré.

nav-menu is-active est élargi.

j'ai pensé qu'un certain pourrait être à la recherche d'une solution sans jquery donc il y aura tout en un seul endroit.

Il y a un moyen plus facile! Avant d'en arriver là, on dirait qu'il y a quelques problèmes avec votre Html.

premier numéro. Vous n'avez pas la structure navbar configurée comme le suggère la documentation. Si vous remplacez le nav-leftnavbar-brand il prendra soin d'une partie de votre Html pour vous. Dans votre exemple de code, vous avez votre logo comme un nav-item à l'intérieur d'un nav-left. navbar-brand c'est exactement ce que. Ce que vous avez fait ici peut marcher, mais je ne suis pas sûr de ce que ça ferait. De la documentation:

"navbar-brand le côté gauche, toujours visible, qui contient habituellement le logo et éventuellement quelques liens ou icônes"

Donc, si vous prenez cette sortie au niveau du conteneur et, dans ce cadre, vous pouvez simplement mettre votre logo à l'intérieur de la première navbar-item. La prochaine chose est de tirer le ' navbar-burgerinside of thenavbar-marque".

"navbar-burger est un menu hamburger qui n'apparaît que sur mobile. Il apparaît comme le dernier enfant de la marque navbar."

une fois que cela est mis en place, vous voudrez mettre les éléments de menu que vous souhaitez s'effondrer à l'intérieur de la navbar-menu. Ce conteneur doit être un frère ou une sœur de la navbar-brand donc ils devraient être au même niveau ensemble. Donc votre code (dans votre conteneur div) devrait ressembler à quelque chose comme ça:

<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: vous devez mettre le data-target de votre hamburger à l'identité de navbar-menu. C'est pas très clair c'est de quoi ils parlent dans les docs. Quoi qu'il en soit, après avoir effectué ces modifications, le code javascript de la documentation devrait travail!

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

Bulma Docs http://bulma.io/documentation/components/navbar/

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 burger de la balise:

<div class="navbar-burger burger" data-target="navMenu" onclick="toggleBurger()">
            <span></span>
            <span></span>
            <span></span>
        </div>