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>

API methods for the "toggles" add-on

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

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
1 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 1 The height of checkmarks.
$mm_checkWidth CSS value $mm_btnSize-$mm_padding 1 The width of checkmarks.
mm_toggleHeight CSS value $mm_btnSize-$mm_padding 1 The height of toggles.
$mm_toggleWidth CSS value ($mm_toggleHeight*2)-$mm_padding 1 The width of toggles.