Tutorial

The mainmenu

Setup your menu like you normally would, using UL, LI and A elements:

<ul>
   <li><a href="/">Home</a></li>
   <li><a href="/about/">About us</a></li>
   <li><a href="/contact/">Contact</a></li>
</ul>

Make sure to wrap the text in either an A or a SPAN element.

Wrap it in a NAV

Wrap the entire UL in a NAV element and give the NAV an ID:

<nav id="my-menu">
   <ul>
      <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 some other element than a NAV, for example a DIV, you must specify this in the configuration.menuNodetype option:

$("#my-menu").mmenu({
   configuration: {
      menuNodetype: "div"
   }
});

It is not important where in the HTML the NAV is, so you can use the same HTML for your desktop website (where you probably don't use the mmenu-plugin).

Next up: Submenus »