Toggles introduction

To make an input with [type="radio"] or [type="checkbox"] appear as a toggle button or a checkmark, first include the "toggles" add-on .js and .css files.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.toggles.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.toggles.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu();
      });
   </script>

Next, add the class "Toggle" or "Check" to the input.

   <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 type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // 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.

$.mmenu.configuration.classNames.toggles = {
   check: "Check",
   toggle: "Toggle"
};

API methods for the "toggles" add-on

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

SCSS variables for the "toggles" add-on

Variable Default value Datatype Description
1 For the actual value, the datatype and a description, have a look at the default variable values reference.
$mm_checkHeight $mm_btnSize-$mm_padding 1 CSS value The height of checkmarks.
$mm_checkWidth $mm_btnSize-$mm_padding 1 CSS value The width of checkmarks.
$mm_toggleCheckedColor #4bd963 CSS value The background-color of toggles when checked.
mm_toggleHeight $mm_btnSize-$mm_padding 1 CSS value The height of toggles.
$mm_toggleWidth ($mm_toggleHeight*2)-$mm_padding 1 CSS value The width of toggles.

SCSS mixins for the "toggles" add-on

Mixin( arguments ) Default value Datatype Description
1 The $class argument is not a classname but a CSS selector, therefor you must include the preceding dot. If not an empty string, make sure to add the specified classname to the extensions option when firing the plugin.
2 For the actual value, the datatype and a description, have a look at the default variable values reference.
mm_colors_checks Include this mixin to create a custom color scheme for the "checks" in the "toggles" add-on.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$checkColor $mm_textColor 2 The color for the checkmarks.
)
mm_colors_toggles Include this mixin to create a custom color scheme for the "toggles" add-on.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$buttonColor $mm_backgroundColor 2 The background-color for the button.
$offBackgroundColor $mm_borderColor 2 The background-color for the toggle when it is toggled off.
$onBackgroundColor $mm_toggleCheckedColor 2 The background-color for the toggle when it is toggled on.
)