All geek questions in one place

I am trying to use the hamburger menu on bulma css, but this does not work. What's wrong?

I am new to bulma css http://bulma.io/

I am trying to use a hamburger menu for a mobile user. I just followed the instructions on this page: http://bulma.io/documentation/components/nav/

But that will not work. What should I add?

Actually, I see a hamburger menu, but it doesn’t work when I click on it.

Thanks.

<!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
source share
6 answers

This may be a problem with the example provided in the docs, I was able to get it working by adding identifiers to .nav-toggle and .nav-menu.

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

jsfiddle here.

So, to make this example work, you need to add the 'id to the corresponding elements. I would recommend diving deep into documents though

+6
source

This solution uses Vue.js to switch the bulma nav component when viewed on a mobile device. Hope this helps others looking for an alternative solution.

Js

First, I add cdn for Vue.js, which can be found here https://unpkg.com/vue , and include the Vue instance in javascript.

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

HTML

a. Wrap the navigation section with the app element to make it reactive (this corresponds to the el attribute of the Vue instance).

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

b. Update .navbar-burger using the v-on: directive to listen for the click event and toggle the data showNav property.

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

from. Update the .navbar menu using the v-bind: directive to reactively update the class attribute with the result of the showNav property.

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

Decision

I have included all solution in jsfiddle

+11
source 
 (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
source

You can make it work without using jquery or bulma.js . Just use your own javascript to add the is-active class to the nav-menu when you click nav-toggle .

nav-menu collapsed.

nav-menu is-active expanding.

I thought that someone could look for a solution without jquery, so everything will be in one place.

+1
source

There is an easier way! Before I get to this, there seem to be a few issues with your Html.

First edition. You do not have a navigation structure created as documentation suggests. If you replace nav-left with navbar-brand , it will take care of some of your Html for you. In your sample code, you have the nav-item logo inside nav-left . navbar-brand does just that. What you did here may work, but I'm not sure what it will do. From the documentation:

" navbar-brand left side, always visible, which usually contains a logo and optionally some links or icons"

So, if you select this to the container level and inside it, you can just put your logo in the first navbar-item . The next is to pull out the navbar-burger inside of the navigation mark.

" navbar-burger is a hamburger menu that only appears on a mobile device. It should appear as the last child of the navbar brand. "

After configuration, you will want to place the menu items that you want to collapse inside navbar-menu . This container should be the navbar-brand brother, so they should be on the same level together. So your code (inside your div container) should look like LIKE SO:

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

Last part of the puzzle: you have to set the data-target your hamburger to the navbar-menu identifier. It is not clear what they say in the documents. In any case, after making these changes, the javascript code from the documentation should work!

I understand that this question was asked by many moons ago, but I hope this helps someone.

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

+1
source

My simple but functional answer:

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

And in the hamburger tag:

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

Source: https://habr.com/ru/post/1013144/

More articles:


All Articles