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>
The "toggles" add-on has no options.
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>
The "toggles" add-on has no CSS variables.
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. |
The "toggles" add-on has no API methods.