Menu
I'm new on bulma css http://bulma.io/
I'm trying to use hamburger menu for mobile user. I just followed instruction on this page: http://bulma.io/documentation/components/nav/
But it doesn't work. What should I add ?
Actually, I can see hamburger menu, but it doesn't work when I am click it.
Thank you.
<!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> 
411
Mobile Navigation BarClick on the hamburger menu (three bars) in the top right corner, to toggle the menu.
Making the Hamburger Menu Responsive with CSS And we also need to hide the responsive hamburger menu (CSS) when the screen is wider than 750px. To do that, we just change display: block; to display: none in #hamburger-menu`. So it will be hidden by default.
What Is A Hamburger Menu? A Hamburger Menu is a way to display navigation links on a website, usually for mobile devices and smaller screens. However, CSS hamburger menus can be used for desktop websites as well. Once you click the “hamburger” icon, a sliding menu will appear, displaying on top of the main content.
This solution uses Vue.js to toggle the bulma nav component when viewing on mobile. I hope this helps others that are looking for an alternative solution.
First, I add the cdn for Vue.js which can be found here https://unpkg.com/vue, and include an instance of Vue in the javascript.
new Vue({ el: '#app', data: { showNav: false } }); a. Wrap the nav section with the element "app" to make it reactive (this maps to the "el" property 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 property showNav.
<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }"> c. Update .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 }"> I've included the entire solution in this jsfiddle
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
