Making 'is-active' css selector configurable to allow for css-only state change

[dhymik]

Jonathan,

thank you for some really beautiful hamburgers! I made it work without Javascript:

I am using the squeeze variant in a hamburger menu which, instead of the proposed a tag, uses a label tag with associated hidden checkbox and :checked pseudo selector.

I replaced the &.is-active selector from the _base.scss and the _squeeze.scss file with a Sass variable $hamburger-activeClass and made it configurable like your other setting variables, and set its default to the original &.is-active value.

Here is my html:

<input class="hiddenToggle" id="toggle" type="checkbox" />
<label for="toggle" class="hamburger hamburger--squeeze">
    <span class="hamburger-box">
        <span class="hamburger-inner"></span>
    </span>
</label>
<nav>
    ....
</nav>

The scss is:

.toggleMenu {
    Nav
    {
        display: none;
    }
    .hiddenToggle
    {   // don't hide so it is still accessible
        position: absolute;
        left: -9999px;
    }
    .hiddenToggle:checked ~ nav 
    {
        display: block;
    }
}

For above use case, I set the $hamburger-activeClass variable to .hiddenToggle:checked ~ & and it works like a charm.

If you think this would be a good overall function for hamburgers, let me know and I'll prepare a pull request with all hamburger variants adjusted with the new variable.

Regards, Mikael

[bbbenjie]

+1 for this nice adjustment. I was searching for the same and would love to see this included in the project.

[maikelRAOW]

I am giving this a +1 it would be offer some very nice customisation. Could for example style based on the aria-expanded status.