Я пытаюсь использовать меню гамбургеров на bulma css, но это не работает. Что случилось?

это решение использует Vue.js для переключения компонента bulma nav при просмотре на мобильном телефоне. Я надеюсь, что это поможет другим, которые ищут альтернативное решение.

JS

во-первых, я добавляю cdn для Vue.js, который можно найти здесь https://unpkg.com/vue, и включить экземпляр Vue в javascript.

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

HTML-код

a. Оберните раздел nav элементом "app", чтобы сделать его реактивным (это сопоставляется свойству " el экземпляра Vue).

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

b. Обновление .navbar-burger с помощью директивы v-on: для прослушивания события click и переключения свойства данных showNav.

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

c. Обновление .navbar-меню с помощью директивы v-bind: для реактивного обновления атрибута класса с результатом свойства showNav.

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

решение

Я включил все решение в этой 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');
    });
})();

вы можете заставить его работать без использования jquery или bulma.js. Просто используйте свой собственный javascript, чтобы добавить is-active to nav-menu класс на нажмите на nav-toggle.

nav-menu свернут.

nav-menu is-active расширяется.

Я думал, что кто-то может искать решение без jquery, поэтому все будет в одном месте.

есть более простой способ! Прежде чем я доберусь до этого, похоже, есть несколько проблем с вашим Html.

первый выпуск. У вас нет структуры navbar, как предлагает документация. Если вы замените nav-left С navbar-brand Он позаботится о некоторых ваших Html для вас. В вашем примере кода у вас есть логотип как nav-item внутри nav-left. navbar-brand делает именно это. То, что вы сделали здесь, может сработать, но я не уверен, что именно это сделает. От документация:

"navbar-brand левая сторона, всегда видимая, которая обычно содержит логотип и, возможно, некоторые ссылки или значки"

поэтому, если вы берете это на уровень контейнера и внутри этого, вы можете просто поместить свой логотип внутри первого navbar-item. Следующая вещь, чтобы вытащить " navbar-burgerinside of theнавигации- "брэнд".

" The navbar-burger это меню гамбургеров, которое появляется только на мобильном телефоне. он должен появляются как последний ребенок navbar-бренда."

как только это настроено, вы захотите поместить пункты меню, которые вы хотите свернуть внутри navbar-menu. Этот контейнер должен быть братом navbar-brand таким образом, они должны быть на одном уровне вместе. Таким образом, ваш код (в вашем контейнере div) должен выглядеть примерно так:

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

последняя часть головоломки: вы должны установить data-target вашего гамбургера на идентификатор из navbar-menu. Не очень понятно, о чем они говорят в документах. В любом случае, после внесения этих изменений код javascript из документации должны работать!

я понимаю, что этот вопрос был задан много лун назад, но я надеюсь, что это может помочь кому-то.

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

мой простой, но функциональный ответ:

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

и в теге burger:

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