Jekyll One
This page is under construction. An updated version will be available soon.

MMenu (MMenu: short for mobile menu) is a JavaScript plugin for creating app look-alike off-canvas menus. It turns a basic HTML menu structure (with <nav>, <ul>, <li> and <a> or <span> elements) into a fully functional off-canvas menu with sliding submenus.

The mmenu.js plugin knows its way around a bit more complex HTML structures as well, so you probably don’t need to change any markup if your migrating from another script or plugin.

For J1 Theme the free to use version MMEnu Light is used.

Getting started

This documentation page assumes you have some knowledge of HTML, CSS and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back!

If you’re new to using the mmenu light plugin, please grab a copy of the mmenu light plugin and try the tutorial.

After the plugin is invoked, there are two add-ons available for the menu: navigation and offcanvas.

navigation()

Creates the navigation with a fixed navbar and sliding submenus from <nav />, <ul />, <li /> and <a /> (or <span />) elements.

offcanvas()

Creates an off-canvas drawer. This drawer can be populated with any kind of content.

Both add-ons navigation and offcanvas have their own set of options, CSS variables and API methods.

Options

The mmenu light plugin and both the navigation and offcanvas add-ons provide a set of options for customizing your menu. The default values can be overridden by passing new values to the method.

<script>
    document.addEventListener(
      "DOMContentLoaded", () => {
        const menu = new MmenuLight(
            document.querySelector( "#my-menu" ),
            "(max-width: 600px)"
        );
        const navigator = menu.navigation({
            // options
        });
        const drawer = menu.offcanvas({
            // options
        });
      }
    );
</script>

Mmenu Plugin

Table 1. Options for the plugin
Method Datatype Default Description

node

HTMLElement

null

The HTML element you want to turn in an off-canvas menu. .Example

<script>
  const menu = new MmenuLight(
    document.querySelector( "#my-menu" ),
    "(max-width: 600px)"
  );
</script>

mediaQuery

String

all

MediaQuery for when the menu should be enabled.

Navigation add-on

Table 2. Options for the navigation add-on
Method Datatype Default Description

selected

String

"Selected"

Classname to use for finding the selected <li />. .Example

<script>
  const navigator = menu.navigation ({
    // navigator options
    selected:         "Selected",
    slidingSubmenus:  true,
    title:            "My Menu",
    theme:            "dark"
  });
</script>

slidingSubmenus

Boolean

true

Wether or not to use sliding submenus (forced to be false in IE11).

title

String

"Menu"

The title above the main panel. For subpanels the text in its parent menu item is used.

theme

String

"light"

Color scheme to use. Possible values: "light" or "dark"

Offcanvas add-on

Table 3. Options for the offcanvas add-on
Method Datatype Default Description

position

String

"left"

The position for the menu. Possible values: "left" or "right" .Example

<script>
  const drawer = menu.offcanvas ({
    // drawer options
    position:         "left"
  });
</script>

Styling (CSS)

It’s pretty easy change the styling for the mmenu light plugin, just override some of the CSS values and variables.

  .mm {
      background: #ffe;
      color: #330;
      --mm-spn-item-height: 46px;
      --mm-ocd-max-width: 500px;
  }

Navigation add-on

It’s pretty easy change the styling for the mmenu light plugin, just override some of the CSS values and variables.

Table 4. Values
Variables Datatype Default Description

background-color

Color

#f3f3f3

Background-color for the menu.

color

Color

#444

Color for the text and borders in the menu.
Table 5. Styles (see mmenu-light.css)
Variables Datatype Default Description

--mm-spn-item-height

CSS value

50px

Height for menu items.

--mm-spn-item-indent

CSS value

20px

Indent for menu items.

--mm-spn-line-height

CSS value

24px

Line-height for text in the menu.

  :root {
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 20px;
    --mm-spn-line-height: 24px
  }
  .mm-spn ul:after {
    content: '';
    display: block;
    height: 50px;
    height: var(--mm-spn-item-height)
  }
  .mm-spn li:before {
    content: '';
    display: block;
    position: absolute;
    top: 25px;
    top: calc(var(--mm-spn-item-height)/ 2);
    right: 25px;
    right: calc(var(--mm-spn-item-height)/ 2);
    z-index: 0;
    ...
  }
  .mm-spn a,
  .mm-spn span {
    position: relative;
    z-index: 1;
    padding: 13px 20px;
    padding: calc(
      (var(--mm-spn-item-height)
      - var(--mm-spn-line-height))/ 2)
      var(--mm-spn-item-indent)
  }
  .mm-spn a:not(:last-child) {
    width: calc(100% - 50px);
    width: calc(100% -
      var(--mm-spn-item-height))
  }
  .mm-spn.mm-spn--navbar:before {
    content: '';
    display: block;
    position: absolute;
    top: 25px;
    top: calc(var(--mm-spn-item-height)/ 2);
    left: 20px;
    left: var(--mm-spn-item-indent);
    width: 10px;
    ...
  }
  .mm-spn.mm-spn--navbar:after {
    content: attr(data-mm-spn-title);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    height: var(--mm-spn-item-height);
    padding: 0 40px;
    padding: 0 calc(var(--mm-spn-item-indent) * 2);
    line-height: 50px;
    line-height: var(--mm-spn-item-height);
    ...
  }
  .mm-spn.mm-spn--navbar ul {
    top: 51px;
    top: calc(var(--mm-spn-item-height) + 1px)
  }
  .mm-spn.mm-spn--vertical ul ul:after {
    height: 25px;
    height: calc(var(--mm-spn-item-height)/ 2)
  }

Offcanvas add-on

It’s pretty easy change the styling for the mmenu light plugin, just override some of the CSS values and variables.

Table 6. Values
Variables Datatype Default Description

top

CSS value

0

Position relative to the top of the page.

bottom

CSS value

0

Position relative to the bottom of the page.
Table 7. Styles (see: mmenu-light.css)
Variables Datatype Default Description

--mm-ocd-width

CSS value

80%

Width for the menu.

--mm-ocd-min-width

CSS value

200px

Minimal width for the menu.

--mm-ocd-max-width

CSS value

440px

Maximum width for the menu.

  :root {
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px
  }
  .mm-ocd__content {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 80%;
    width: var(--mm-ocd-width);
    min-width: 200px;
    min-width: var(--mm-ocd-min-width);
    max-width: 440px;
    max-width: var(--mm-ocd-max-width);
    background: #fff;
    ...
  }
  .mm-ocd__backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: calc(100% - 80%);
    width: calc(100% - var(--mm-ocd-width));
    min-width: calc(100% - 440px);
    min-width: calc(100% - var(--mm-ocd-max-width));
    max-width: calc(100% - 200px);
    max-width: calc(100% - var(--mm-ocd-min-width));
    background: rgba(3, 2, 1, 0)
  }

API

After invoking the add-ons, an API is available for each add-on. With this API, you can invoke the add-on methods to control the plugin manually.

<script>
  document.addEventListener(
    "DOMContentLoaded", () => {
      const menu = new MmenuLight(
          document.querySelector( "#my-menu" )
      );
      const navigator = menu.navigation();
      const drawer = menu.offcanvas();
      navigator.openPanel(
        document.querySelector( "#my-ul" );
      );
      document.querySelector( 'a[href="#my-menu"]' )
      .addEventListener( 'click', ( evnt ) => {
          evnt.preventDefault();
          drawer.open();
      });
    }
  );
</script>

Navigation add-on

openPanel

Invoke this method to open a panel in the menu.

Table 8. Methods
Arguments Datatype Default Description

panel

HTMLElement

null

Panel (UL) to open.

Off-Canvas add-on

Creates an off-canvas drawer. This drawer can be populated with any kind of content.

Table 9. Methods for the offcanvas add-on
Method Datatype Default Description

open

NA

NA

Invoke this method to open the menu.

Example
<script>
  const drawer = menu.offcanvas ({
    // drawer options
    position:         "left"
  });
  _open_menu.addEventListener( "click", function (e) {
    e.preventDefault();
    drawer.open();
  });
</script>

close

NA

NA

Invoke this method to close the menu.

Example
<script>
  const drawer = menu.offcanvas ({
    // drawer options
    position:         "left"
  });
  _open_menu.addEventListener( "click", function (e) {
    e.preventDefault();
    drawer.close();
  });
</script>