(js) => blog

Hamburgers

Page section: blog
TAGS: classList toggle animation CSS
More on classList

So I added a responsive menu to the site using some cool well made animated hamburger designs from Jonsuh.

This was quite a bit more tricky than I first thought. There was no CDN link on the page so I downloaded but it came with a ton of junk like a gulp file and other stuff I didn’t want.

I have since found the link on jsdelvr.com and CDNJS. CDNJS has links to just the CSS files either minified or normal.

Most was very well explained on the site but not how to change the hamburger colour. There were instructions for SASS using SASS variables but nothing for plain old CSS. So it was probably just as well I downloaded the CSS file so I could have a look inside. It surprisingly confusing when you’ve no idea how the thing is created.

In the past I’ve created hamburger icons using either <div> tags or an icon.

<div class="hamburger">
    <div></div>
    <div></div>
    <div></div>
</div>

The HTML for this was very different.

<button class="hamburger hamburger--spin" type="button">
    <span class="hamburger-box">
        <span class="hamburger-inner"></span>
    </span>
</button>

So I wasn’t sure how this worked. A look at the CSS finally revealed that the inner <span> is the burger part of the icon while the top and lower parts of the ‘bun’ is made up from two pseudo-elements: a ::before and ::after attached to the <span class="hamburger-inner">. So to change the colours you need to change the colours on both of these as well as the <span> tag itself.

In the CSS file the background-color is also set where the button has an added class of is-active.

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: red;
}

Using .classList.toggle is a way to add then remove a class name to an element. There are two classes to add. The is-active class is added to the button to change the hamburger into a close symbol. And a custom class you need to create to open the menu. I’ve used the class show-menu which will typically have a CSS transform property in it.

Here’s an example of the code using an arrow function.

The original button has a class of hamburger and I’ve assumed a class of main-menu for the naviagation block.

const hamburgerBtn = document.querySelector('.hamburger');
const nav = document.querySelector('.main-menu');

hamburgerBtn.addEventListener('click', () => {
    hamburgerBtn.classList.toggle('is-active');
    nav.classList.toggle('show-menu');
});

The menu design

I tried leaving the menu button within the <nav> structure I had created for the desktop menu. the whole way just hiding it when the screen width used the regular menu. This works well for some designs but I didn’t really think this through properly.

<nav class="menu">
    <ul>
        <li><a href="/search/">Search</a></li>

        {{ range where .Site.Pages "Kind" "section" }}

        <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>

        {{ end }}

        <li><a href="/tags/">Tags</a></li>

        <li><a href="/links/">Links</a></li>
    </ul>

    <button class="hamburger hamburger--spin" type="button">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
</nav>

In the end I removed the <button> from the nav element completely and went back to more what I had in mind in terms of a sliding menu.

Quick setup

Here’s my way of quickly setting this up for the future:

You can use either of the links above to get the CSS file and add to the <head> of your pages.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hamburgers@1.1.3/dist/hamburgers.css">

2. Add the button to your HTML

Use the HTML above to place the button where you’d like it.

3. Choose an animation

Choose from the main page and add the class for that animation to your button’s class attribute.

<button class="hamburger hamburger--spin" type="button">

These are prefaced with hamburger and have a double hyphen in them followed by the animation name. The example above uses: hamburger--spin.

4. Use media queries to hide / show the hamburger and the desired screen size.

5. Add JavaScript

The JavaScript does two things.

  1. It adds/removes the class of is-active to the button which controls the state of the button: whether it’s a hamburger or a cross for example.
  2. It adds/removes a class to your hidden navigation to make it visible.

Link your JS file to the <head> section of your pages:

<script src="/js/menu.js" async></script>

Then all that’s required is setting up the menu animation.

Table of Contents