Toggles introduction

To make an input with [type="radio"] or [type="checkbox"] appear as a toggle button or a checkmark, add the classname "Toggle" or "Check" to the input.

<body>
    <nav id="my-menu">
        <ul>
            <li>
                <a href="#">A toggle</a>
                <input type="checkbox" class="Toggle" />
            </li>
            <li>
                <a href="#about">Another toggle</a>
                <input type="checkbox" class="Toggle" />
            </li>
            <li>
                <a href="#contact">A checkmark</a>
                <input type="checkbox" class="Check" />
            </li>

If you're using different classnames (for example "button" or "mark"), you must specify this in the classNames.toggles.toggle and classNames.toggles.check options in the configuration object.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                // options
            }, {
                // configuration
                classNames: {
                    toggles: {
                        toggle: "button",
                        check: "mark"
                    }
                }
            });
        }
    );
</script>

Options for the "toggles" add-on

The "toggles" add-on has no options.

Configuration for the "toggles" add-on

The "toggles" add-on has no configuration options, it does add an object to the classNames option.

<script>
    Mmenu.configs.classNames.toggles = {
        check: "Check",
        toggle: "Toggle"
    };
</script>

CSS variables for the "toggles" add-on

The "toggles" add-on has no CSS variables.

SCSS variables for the "toggles" add-on

Variable	Datatype	Default value	Description
¹ For the actual value, the datatype and a description, have a look at the default variable values reference.
Include CSS
$mm_include_toggles	Boolean	`true`	Whether or not to include CSS for toggles throughout the entire CSS framework.
$mm_include_checks	Boolean	`true`	Whether or not to include CSS for checks throughout the entire CSS framework.
Colors
$mm_toggleCheckedColor	CSS value	`#4bd963`	The background-color of toggles when checked.
Sizes
$mm_checkHeight	CSS value	`$mm_btnSize-$mm_padding` ¹	The height of checkmarks.
$mm_checkWidth	CSS value	`$mm_btnSize-$mm_padding` ¹	The width of checkmarks.
mm_toggleHeight	CSS value	`$mm_btnSize-$mm_padding` ¹	The height of toggles.
$mm_toggleWidth	CSS value	`($mm_toggleHeight*2)-$mm_padding` ¹	The width of toggles.

API methods for the "toggles" add-on

The "toggles" add-on has no API methods.