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 follow the tutorial step by step and you'll have it up and running in no time.

Lets start with creating a .html file and add the markup for the page. If you need help with this part, please read the off-canvas menu tutorial first.

Now 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 markup.

<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 write these styles in a separate .css file, but for this tutorial we'll write them in an inline <style />.

<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 /> for the subpanel.

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

The plugin assumes every <ul />, <ol /> and <div /> that is a direct descendant of a <li /> is a submenu or subpanel. If you're using some other element (for example a <section />), you must specify this in the panelNodetype option in the configuration object. Since this option probably applies to all menus on your webpage, you could also override it in the plugin defaults.

Override instance configuration
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                // options
            }, {
                // configuration
                panelNodetype: ["ul", "ol", "div", "section"]
            });
        }
    );
</script>
Override plugin defaults
<script>
    Mmenu.configs.panelNodetype = ["ul", "ol", "div", "section"];

    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu");
        }
    );
</script>

Now add some markup for the contact information to the <div />. For this tutorial, we'll use a <img />, <strong /> and <dl />, but you can use any markup 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. Again, for this tutorial we'll write the styles in an inline <style />.

<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 (not for the contac details), 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>

        <!-- 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