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>
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.