toggle-class

Syntax

toggle-class: (class) [every (time)] [after (time)][, (class)...];

time = Time in standard CSS time format, eg. 1s = 1 second, 250ms = 250 milliseconds.

This command puts the specified class into the target selector if it is not there, or removes it if it is there.

The following is an example of a desktop screen hamburger element toggling on or off a class "menuOpen" in the body node. This is often the only thing needed for a hamburger to hide/show a pop-out menu, as you can specify CSS styling with other elements on the page and turn on and off CSS animations just by having a class to specify the menu state in the body tag (eg. "menuOpen"). Ie. If the body tag has the "menuOpen" tag, in your stylesheet do one set of CSS styling ("body.menuOpen {...CSS goes here...}"), and if it is not in the body tag, do a different set of CSS styling ("body:not(.menuOpen) {...CSS goes here...}"):

#burger:click {
    body {
        toggle-class: .menuOpen;
    }
}

body.menuOpen #myButton:click {
    alert: "mobile menu is open";
}

body:not(.menuOpen) #myButton:click {
    alert: "menu is closed";
}

Note: If you were doing the above example for a mobile-only hamburger, you could also wrap in a media query or use a conditional which would only run if the screen was mobile width:

#burger:if-media-max-width(720px):click {
    body {
        toggle-class: .menuOpen;
    }
}

/* Additionally, on a window resize clean up by removing the menuOpen class and close the menu... */
window:resize {
    body {
        remove-class: .menuOpen;
    }
}

toggle-class