update
Works with the current latest version 0.9.1
bulma-megamenu
Bulma extension to make Mega Menu.
Usage
<nav class="navbar ">
....
<div class="navbar-item has-dropdown is-hoverable is-mega">
<div class="navbar-link">
Blog
</div>
<div id="blogDropdown" class="navbar-dropdown">
<div class="container is-fluid">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
</div>
<div class="column">...</div>
<div class="column">...</div>
<div class="column">...</div>
</div>
</div>
...
</nav>
Integration
- Clone the bulma repo
- Under the
sassfolder, create a new folder calledextensions - In this new folder, create a new file
megamenu.scss - Copy the code from the
bulma-megamenu repo's megamenu.scss file into your new file - In the same folder create a new file
_all.sass(this is not required, but will help when you add more extensions) - In this file add this code:
@charset "utf-8"
@import "megamenu.scss"
At the end of the bulma.sass file, add this line: @import "sass/extensions/_all"
Now, you can just build the bulma project with npm run build, and the output will be available in the css folder.
Menu not covering the whole screen width
Hi! I was just wondering if you have any plans to update or have any workarounds for this? The mega-menu does not seem to cover the entire screen width anymore far from what I expected in the demo. Great extension by the way!
I'm using the latest version (0.7.1).
Expected
From the demo.
Actual Output
Note: I intentionally colored the background for clarity in this screencap
Does it suppose to work with current version of Bulma 0.7.5?
Hi, I am trying to implement your plug-in into a WordPress theme, but I am relatively new to Bulma, my current theme is at our website, and even when I made the README modifications using Chrome development tools, I was not able to get the megamenu to work...
Are there some upgrades needed for the plug-in to support newest release? I see that the last commit in the .scss file is two years old, so I was wondering if something on a Bulma side has not changed...
Broken usage demo in README.md
Hey,
it looks like you've copied over the example usage code wrong.
This is the correct, indented code. Feel free to copy + paste it within the readme.md file if you find it suitable 👍
I'm sorry for not creating a PR directly.