Implementing animated hamburger menu icons is a nice touch, but something I’ve always found to be a pain — particularly adjusting the sizing/positioning/transformation of the bars in the "open" state.
I just found Hamburgers and gave it a test drive. Nice library and pretty easy to get set up.
Install
yarn add hamburgers
Import in main.scss
@import "~hamburgers/_sass/hamburgers/hamburgers";
Add the markup
Probably in your header.blade.php
partial:
<button class="hamburger hamburger--vortex" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
In this case, I’m using the ‘vortex’ type.
Customize as desired in _variables.scss
Here’s what I used for my current project, but see the different types and the list of SASS variables in the page linked to above.
/** Hamburger icon */
$hamburger-padding-x: 0;
$hamburger-padding-y: 0;
$hamburger-layer-width: 20px;
$hamburger-layer-height: 2px;
$hamburger-layer-spacing: 4px;
$hamburger-layer-color: $brand-primary;
$hamburger-types: (vortex);
Again, I’m using the ‘vortex’ type here.
Add JS to make it functional to common.js
export default {
init() {
// JavaScript to be fired on all pages
$('.hamburger').click(function() {
$(this).toggleClass('is-active');
});
},
finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired
},
};
You would likely also be toggling the state of your menu in the same click
handler.
That should be it.
Join the discussion on Roots Discourse