As part of a larger overhaul, I recently redid the navigation for this site and switched the CSS framework from Semantic UI to Bulma. The main reasons are that I find Bulma requires simpler HTML, and that it has no included JavaScript dependencies. JavaScript is needed for some features though, one of them being the burger menu.
Bulma has a navbar component that automatically adapts to touchscreen devices by hiding the
navbar-menu item. It also supplies a burger menu item, navbar-burger, that is shown when the
navbar-menu is hidden.
<nav class="navbar">
<div class="navbar-brand">
<a role="button" class="navbar-burger" aria-label="menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/">Home</a>
<a class="navbar-item" href="/blog/">Blog</a>
</div>
</div>
</nav>
The navbar-menu is shown by setting the CSS class is-active on the navbar-menu item, and of course we would like that to happen when we click the burger menu. It would be easy enough to do it with vanilla JS, but I had heard good things about _hyperscript and wanted to try it out.
It turns out to be ridiculously simple, all I had to do was to modify the navbar-burger tag as follows:
<a role="button"
class="navbar-burger"
_="on click toggle .is-active on .navbar-menu then toggle .is-active on me">
The code is pretty much self explanatory, but to be clear the added line toggles .is-active on both the navbar-burger element itself and the navbar-menu, opening the menu and turning the burger menu into a cross. When clicked again it toggles it back. You can try it in the navbar above if you have a small screen browser.
I can't say I've ever been a fan of HyperTalk-like syntaxes, but for simple things like this it's works like a charm, and the code is so short! The _hyperscript site has a comparison between vanilla JS and _hyperscript to show how much more concise it is.
I love libraries that simplifies things.