Styling lists

By default all ULs will automatically be styled like a listview. If you don't want an UL to be styled like a listview, add the class "mm-nolistview" to it.

<nav id="my-menu">
   <div>
      <p>Here's an UL that won't be styled like an app-menu:</p>
      <ul class="mm-nolistview">
         <li><a href="/about/history/">History</a></li>
         <li><a href="/about/team/">The team</a></li>
         <li><a href="/about/address/">Our address</a></li>
      </ul>
   </div>
</nav>

Open and close submenus

You don't need to worry about any links for opening and closing submenus, the plugin automatically adds them for you.

The plugin assumes every A node in a menu item should be clickable, it therefor adds the link to open its submenu next to it. To make the entire menu item open the submenu, just replace the A with a SPAN.

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><span>About us</span>
         <ul class="Vertical">
            <li><a href="/about/history/">History</a></li>
            <li><a href="/about/team/">The team</a></li>
            <li><a href="/about/address/">Our address</a></li>
         </ul>
      </li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

Vertical submenus

By default, all submenus will come sliding in from the right. Set the slidingSubmenus option to false to prevent this behavior. Or add the class "Vertical" to a single submenu if you want it to expand below its parent.

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a>
         <ul class="Vertical">
            <li><a href="/about/history/">History</a></li>
            <li><a href="/about/team/">The team</a></li>
            <li><a href="/about/address/">Our address</a></li>
         </ul>
      </li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

If you're using a different classname (for example "expand"), you must specify this in the classNames.vertical option in the configuration object.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      }, {
         // configuration
         classNames: {
            vertical: "expand"
         }
      });
   });
</script>

Inset submenus

To have a single submenu always be visible inside its parent, add the class "Inset" to it.

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a>
         <ul class="Inset">
            <li><a href="/about/history/">History</a></li>
            <li><a href="/about/team/">The team</a></li>
            <li><a href="/about/address/">Our address</a></li>
         </ul>
      </li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

If you're using a different classname (for example "inline"), you must specify this in the classNames.inset option in the configuration object.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      }, {
         // configuration
         classNames: {
            inset: "inline"
         }
      });
   });
</script>

Selected item

To make a LI visibly selected, add the class "Selected" to it.

<nav id="my-menu">
   <ul>
      <li class="Selected"><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

If you're using a different classname (for example "active"), you must specify this in the classNames.selected option in the configuration object.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      }, {
         // configuration
         classNames: {
            selected: "active"
         }
      });
   });
</script>

Dividers

To make a LI appear as a divider, add the class "Divider" to it.

<nav id="my-menu">
   <ul>
      <li class="Divider">Website</li>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

If you're using a different classname (for example "title"), you must specify this in the classNames.divider option in the configuration object.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      }, {
         // configuration
         classNames: {
            divider: "title"
         }
      });
   });
</script>

Spacers

If you want to add some extra whitespace to the top of a menu item or divider, add the class "Spacer" to it.

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li class="Spacer"><a href="/contact/">Contact</a></li>
   </ul>
</nav>

If you're using a different classname (for example "space"), you must specify this in the classNames.spacer option in the configuration object.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      }, {
         // configuration
         classNames: {
            spacer: "space"
         }
      });
   });
</script>

Next up:
Fire the plugin