Contact lists

In this tutorial, we'll create a contact list with detailed contact information for each person in the list. For a better usability, we'll add dividers, a searchfield and a section indexer.

Just like in the off-canvas menu tutorial, we'll start with creating a .html page, include the needed .js and .css files and setup the HTML for the page.

Lets add a <div /> with an <ul /> for the menu. We'll give the <div /> and the <ul /> an ID so we can target them later on.

<div id="my-menu">
   <ul id="my-contacts"></ul>
</div>

Now add a <li /> for each contact in the <ul /> and add some HTML.

<div id="my-menu">
   <ul id="my-contacts">
      <li>
         <span>
            <img src="path/to/alan.png" />
            Alan<br />
            <small>Thompson</small>
         </span>
      </li>
      <!-- more <li />s -->
   </ul>
</div>

Write some CSS to style this new markup. Most commonly, you'd add these styles to an external .css file.

<style>
   .mm-listitem span img {
      border-radius: 50px;
      width: 50px;
      height: 50px;
      margin: -5px 10px -5px -5px;
      float: left;
   }
</style>

The contact details

We want the contact details to open in a new panel, so lets add a <div /> in the <li />. Add the classname Panel to it, so the plugin knows to treat this <div /> as a (sub)panel.

<div id="my-menu">
   <ul id="my-contacts">
      <li>
         <span>
            <img src="path/to/alan.png" />
            Alan<br />
            <small>Thompson</small>
         </span>
         <div class="Panel"></div>
      </li>
      <!-- more <li />s -->
   </ul>
</div>

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

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            // options
         }, {
            // configuration
            classNames: {
               panel: "details"
            }
         });
      }
   );
</script>

Now add some HTML for the contact information to the <div />. For this tutorial, we'll use a <dl />, but you can use any HTML you want. Just keep in mind that every <ol /> and <ul /> that is a direct descendant of a panel will automatically be styled like a listview.

<div id="my-menu">
   <ul id="my-contacts">
      <li>
         <span>
            <img src="path/to/alan.png" />
            Alan<br />
            <small>Thompson</small>
         </span>
         <div class="Panel">
            <img src="path/to/alan.png" />
            <strong>Alan Thompson</strong>
            <dl>
               <dt>First name</dt>
               <dd>Alan</dd>

               <dt>Last name</dt>
               <dd>Thompson</dd>

               <dt>Telephone</dt>
               <dd>012-345-6789</dd>

               <!-- more <dt />s and <dd />s -->
            </dl>
         </div>
      </li>
      <!-- more <li />s -->
   </ul>
</div>

Write some CSS to style this new markup. Most commonly, you'd add these styles to an external .css file.

<style>
   .mm-panel > img {
      border-radius: 100px;
      display: block;
      width: 100px;
      height: 100px;
      margin: 0 auto 20px auto;
   }
   .mm-panel > strong {
      display: block;
      text-align: center;
   }
   .mm-panel > dl {
      display: block;
      padding: 0;
      margin: 0;
   }
   .mm-panel > dl > dt {
      font-weight: bold;
      display: block;
      padding: 0;
      margin: 10px 0 0 0;
   }
   .mm-panel > dl > dd {
      display: block;
      padding: 0;
      margin: 0 0 10px 0;
   }
</style>

Fire the plugin

All that's left, is to fire the plugin. We'll use the dividers, searchfield and section indexer add-ons.

The dividers, searchfield and section indexer are only needed for the contact list, so lets specify this it in the addTo option for each add-on.

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            dividers: {
               add: true,
               addTo: "#my-contacts",
               fixed: true
            },
            searchfield: {
               add: true,
               addTo: "#my-contacts"
            },
            sectionIndexer: {
               add: true,
               addTo: "#my-contacts"
            }
         });
      }
   );
</script>

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.css" rel="stylesheet" />
   </head>
   <body>
      <!-- The page -->
      <div id="my-page">
         <div id="my-header">
            <a href="#my-menu">Open the menu</a>
         </div>
         <div id="my-content"></div>
         <div id="my-footer"></div>
      </div>

      <!-- The menu -->
      <div id="my-menu">
         <ul id="my-contacts">
            <li>
               <span>
                  <img src="path/to/alan.png" />
                  Alan<br />
                  <small>Thompson</small>
               </span>
               <div class="Panel">
                  <img src="path/to/alan.png" />
                  <strong>Alan Thompson</strong>
                  <dl>
                     <dt>First name</dt>
                     <dd>Alan</dd>

                     <dt>Last name</dt>
                     <dd>Thompson</dd>

                     <dt>Telephone</dt>
                     <dd>012-345-6789</dd>

                     <!-- more <dt />s and <dd />s -->
                  </dl>
               </div>
            </li>
            <!-- more <li />s -->
         </ul>
      </div>

      <script src="path/to/mmenu.js"></script>
      <script>
         Mmenu.configs.offCanvas.page.selector = "#my-page";

         document.addEventListener(
            "DOMContentLoaded", () => {
               new Mmenu( "#my-menu", {
                  dividers: {
                     add: true,
                     addTo: "#my-contacts",
                     fixed: true
                  },
                  searchfield: {
                     add: true,
                     addTo: "#my-contacts"
                  },
                  sectionIndexer: {
                     add: true,
                     addTo: "#my-contacts"
                  }
               });
            }
         );
      </script>
   </body>
</html>

Next tutorial:
Thumbnail grid