Je suis en train d'utiliser hamburger menu sur bulma css, mais ça ne fonctionne pas. Quel est le problème?

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

Je suis en train d'utiliser hamburger menu pour l'utilisateur mobile.
J'ai simplement suivi les instructions cette page: http://bulma.io/documentation/components/nav/

Mais ça ne fonctionne pas. Que dois-je ajouter ?

En fait, je peux voir hamburger menu, mais il ne fonctionne pas quand je suis sur elle.

Merci.

<!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>
Cela devrait fonctionner hors de la boîte pour bulma css. Veuillez vérifier si vous avez la minifiés fichier css dans le chemin d'accès correct. Vous pouvez également utiliser le CDN option. CA lien pour bulma est ici.
Umm, je suis sûr que c'est le chemin d'accès correct. En outre, j'ai aussi essayé de CA, il ne fonctionne pas pour moi.

OriginalL'auteur moge | 2016-12-14

  1. 7

    Cela peut être un problème avec l'exemple donné dans la doc, j'ai été en mesure d'obtenir ce travail en ajoutant des id aux .nav-bascule et .nav-menu.

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

    jsfiddle ici.

    Donc, pour obtenir l'exemple fonctionne, vous devez ajouter " id à leurs éléments respectifs. Je le recommande plongée profonde dans les docs si

    Je l'ai déjà essayé, mais ça ne fonctionne pas. La chose que je voudrais savoir, c'est le fichier que je doit importation est seulement de bulma.css ? Je veux dire que je pensais que je devrais importer jquery ou quelque chose.
    bien.. vous devez importer jquery et le bulma.js . cliquez sur les événements de la valeur liquidative sont dans bulma.js
    Enfin, ça marche!!!! Merci beaucoup. J'ai été un malentendu que bulma css ne fonctionne css
    Je l'ai fait! Merci beaucoup:)
    Dommage que votre exemple, s'appuie sur jQuery.

    OriginalL'auteur semuzaboi

  2. 16

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

    JS

    D'abord, j'ai ajouter de la can pour Vue.js qui peut être trouvé ici https://unpkg.com/vue, et comprennent une instance de la Vue dans le javascript.

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

    HTML

    un. Enveloppez-la valeur liquidative de la section avec l'élément "app" pour le rendre réactif (il correspond à la "el", propriété de la Vue, par exemple).

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

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

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

    c. La mise à jour .navbar-menu à l'aide de la v-lier: directive pour la mise à jour de l'attribut de classe avec le résultat de la showNav propriété.

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

    Solution

    J'ai inclus l'ensemble de la solution dans ce jsfiddle

    est venu ici de google et je voulais ajouter à votre réponse depuis nav sera obsolète bientôt sur Bulma. Si vous utilisez le navbar exemple juste besoin d'ajouter :class="{ 'is-active': showNav }" @click="showNav = !showNav" à la navbar-burger tag et aussi :class="{ 'is-active': showNav }" à la navbar-menu
    Merci @JeffBeltran! J'ai mis à jour mon solution pour utiliser la dernière version de bulma.css et la barre de navigation de la composante.
    Pouvez-vous ajouter à votre solution pour faire à la barre de navigation de glisser vers le bas lorsqu'il est cliqué? J'ai essayé d'ajouter une transition wrapper autour de navbar-menu mais n'arrive pas à le faire fonctionner.
    J'ai regardé d'essayer d'ajouter cela, mais seulement constaté que vous ne pouvez pas appliquer une transition à des éléments qui ont display: none. CSS n'est pas mon fort et j'espère donc que quelqu'un d'autre pourrait offrir une solution.

    OriginalL'auteur tbonz

  3. 2

    Vous pouvez le faire fonctionner sans l'aide de jquery ou bulma.js. Tout simplement utiliser votre propre code javascript pour ajouter is-active à nav-menu classe sur cliquez sur nav-toggle.

    nav-menu est effondré.

    nav-menu is-active est élargi.

    J'ai pensé someome peut-être à la recherche d'une solution sans jquery, donc il y aura de tout dans un seul endroit.

    OriginalL'auteur Morishiri

  4. 2
    (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');
    });
})();
    Alors que ce code peut répondre à la question, en fournissant plus de contexte sur comment et/ou pourquoi il résout le problème serait d'améliorer la réponse à long terme de valeur.
    Oh, je suis désolé, juste de commencer à aider les gens d'ici... donc je vais essayer de l'expliquer à tous(penser à long terme): Nous avons besoin de requête(souvenez-vous de jQuery? pas besoin d'utiliser plus) la valeur liquidative-bascule et nav-menu, de les stocker dans des variables(lire sur le type de référence), après que commencer à écouter des événements sur le "burger" dans ce cas, un clic de la souris ou appuyez sur à l'écran. Lorsque le clic se produit, il va basculer de la classe "est-active". cette fonction est une auto de l'exécution de la fonction, ce qui signifie qu'il est en cours d'exécution à partir du moment où la page est chargée.

    OriginalL'auteur Ruggero Rebellato

  5. 1

    Mon simple mais fonctionnelle réponse:

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

    Et dans le burger tag:

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

    OriginalL'auteur Erich García