Instantly share code, notes, and snippets.
jordanbrauer/megamenu.bulma.html
Last active Oct 19, 2017
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