mmlight tutorial

Creating a lightweigh mobile menu using the mmenu light plugin is really easy. Just follow the steps in this lightweigh mobile menu tutorial.

Setup the webpage

Create a .html file like you normally would. If you can, it is recommended to use the HTML5 doctype.

<!DOCTYPE html>
<html>

Include your stylesheet(s) for styling the webpage.

<link href="path/to/my-styles.css" rel="stylesheet" />

Next, include the mmenu light .js and .css files. Most commonly, .css files are included in the <head /> and .js files are included before the closing <body />.

<link href="path/to/mmenu-light.css" rel="stylesheet" />
<script src="path/to/mmenu-light.js"></script>

The page

With the mmenu light plugin, your HTML is not altered and you can use the same HTML for your desktop menu as for the mobile menu. Just make sure none of the ancestor elements of your menu has a transform CSS property applied to it.

For this tutorial, we'll start with some basic HTML with a header, content and footer.

<body>
   <div id="my-page">
      <div id="my-header"></div>
      <div id="my-content">
         <h1>The title</h1>
         <p>Some content</p>
      </div>
      <div id="my-footer"></div>
   </div>
</body>

Recap

You now have a .html file which looks something like this.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>My webpage</title>
      <link href="path/to/my-styles.css" rel="stylesheet" />
      <link href="path/to/mmenu-light.css" rel="stylesheet" />
   </head>
   <body>
      <div id="my-page">
         <div id="my-header"></div>
         <div id="my-content">
            <h1>The title</h1>
            <p>Some content</p>
         </div>
         <div id="my-footer"></div>
      </div>

      <script src="path/to/mmenu-light.js"></script>
   </body>
</html>

Next up:
The menu