Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bulma 0.6 implementation of the megamenu extension https://github.com/hunzaboy/bulma-megamenu
<nav class="navbar">
<div class="navbar-brand">
<div class="navbar-burger burger" data-target="navMenubd-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<!-- simple dropdown menu -->
<div class="navbar-item has-dropdown is-hoverable">
<a href="#" class="navbar-link">Docs</a>
<div class="navbar-dropdown">
<a href="#" class="navbar-item">Overview</a>
<a href="#" class="navbar-item">Modifiers</a>
<a href="#" class="navbar-item">Columns</a>
<a href="#" class="navbar-item">Layout</a>
<a href="#" class="navbar-item">Form</a>
<a href="#" class="navbar-item">Elements</a>
<a href="#" class="navbar-item">Components</a>
<hr class="navbar-divider">
<div class="navbar-item">
<div>
<p class="is-size-6-desktop">
<strong class="has-text-info">0.5.1</strong>
</p>
</div>
</div>
</div>
</div>
<!-- mega dropdown menu -->
<div class="navbar-item has-dropdown is-hoverable is-mega">
<a class="navbar-link">
Blog
</a>
<div class="navbar-dropdown">
<div class="container is-fluid">
<div class="columns">
<div class="column">
<h1 class="title is-size-6 is-mega-menu-title">Sub Menu Title</h1>
<a href="#" class="navbar-item">
<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 href="#" class="navbar-item">
<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 href="#" class="navbar-item">
<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">
<h1 class="title is-size-6 is-mega-menu-title">Sub Menu Title</h1>
<a href="#" class="navbar-item">
<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 href="#" class="navbar-item">
Overview
</a>
<a href="#" class="navbar-item">
Modifiers
</a>
<a href="#" class="navbar-item">
Columns
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a href="#" class="navbar-item">
<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 href="#" class="navbar-item">
<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 href="#" class="navbar-item">
<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">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a href="#" class="navbar-item">Overview</a>
<a href="#" class="navbar-item">Modifiers</a>
<a href="#" class="navbar-item">Columns</a>
<a href="#" class="navbar-item">Layout</a>
</div>
</div>
</div>
<hr class="navbar-divider">
<div class="navbar-item">
<div class="navbar-content">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<strong>Stay up to date!</strong>
</div>
</div>
<div class="level-right">
<div class="level-item">
<a href="#" class="button is-small">
<i class="fa fa-sm fa-rss"></i>
Subscribe
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- simple dropdown menu w/ levels -->
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link">
More
</div>
<div id="moreDropdown" class="navbar-dropdown ">
<a href="#" class="navbar-item">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Extensions</strong>
<br>
<small>Side projects to enhance Bulma</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon has-text-info">
<i class="fa fa-plug"></i>
</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</nav>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any nav burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
/**
* Bulma extension to make Mega Menus
*
* @link https://github.com/hunzaboy/bulma-megamenu
*/
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.