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

Я новичок в 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>

6 ответов


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

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

jsfiddle здесь.

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


это решение использует 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>