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="menu">
    <ul id="contacts"></ul>
</div>

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

<div id="menu">
    <ul id="contacts">
        <li>
            <span>
                <span class="preview">
                    <img src="path/to/alan.png" />
                    <span>Alan<br>
                        <small>Thompson</small>
                    </span>
                </span>
            </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>
    .preview {
        display: flex;
        gap: 15px;
        align-items: center;
    }
    .preview img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #ccc;
    }
    .preview > span {
        flex-grow: 1;
    }
</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 and in it, add some markup for the contact information. Note the data-mm-title attribute on the <div>, it will be used as the title for the panel.

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="menu">
    <ul id="contacts">
        <li>
            <span>
                ...
            </span>
            <div data-mm-title="Alan Thompson">
                <div class="details">
                    <img src="path/to/alan.png" />
                    <strong>Alan</strong>
                    <dl>
                        <dt>Name</dt>
                        <dd>Alan Thompson</dd>

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

                        <dt>Email</dt>
                        <dd>info@domain.com</dd>

                        <!-- more <dt />s and <dd />s -->
                    </dl>
                </div>
            </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>
    .details {
        padding: 50px 20px;
    }
    .details img {
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto 20px;
        background: #ccc;
    }
    .details strong {
        display: block;
        margin-bottom: 20px;
        text-align: center;
        font-size: 18px;
    }
    .details dl {
        display: grid;
        grid-template-columns: auto 1fr;
    }
    .details dt,
    .details dd {
        padding: 15px 0;
        margin: 0;
    }
    .details dt {
        padding-right: 15px;
        color: #999;
    }
    .details dd ~ dt,
    .details dd ~ dd {
        border-top: 1px solid #ccc;
    }
</style>

Fire the plugin

All that's left, is to fire the plugin. We'll use the navbar.title option to change the title and the searchfield add-on to search through the contacts.

The searchfield is only needed for the contact list (not for the contac details), so lets specify this in the addTo option for the add-on.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                navbar: {
                    title: "My contacts"
                },
                searchfield: {
                    add: true,
                    addTo: "#contacts"
                },
            });
        }
    );
</script>

Recap

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
        <title>My webpage</title>
        <link href="path/to/styles.css" rel="stylesheet" />
        <link href="path/to/mmenu.css" rel="stylesheet" />
        
        <style>
            .preview {
                display: flex;
                gap: 15px;
                align-items: center;
            }
            .preview img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: #ccc;
            }
            .preview > span {
                flex-grow: 1;
            }

            .details {
                padding: 50px 20px;
            }
            .details img {
                display: block;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                margin: 0 auto 20px;
                background: #ccc;
            }
            .details strong {
                display: block;
                margin-bottom: 20px;
                text-align: center;
                font-size: 18px;
            }
            .details dl {
                display: grid;
                grid-template-columns: auto 1fr;
            }
            .details dt,
            .details dd {
                padding: 15px 0;
                margin: 0;
            }
            .details dt {
                padding-right: 15px;
                color: #999;
            }
            .details dd ~ dt,
            .details dd ~ dd {
                border-top: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="page">
            <div id="header">
                <a href="#menu"></a>
            </div>
            <div id="content">
                <h1>This is a demo.</h1>
                <p>Click the menu icon to toggle the menu.</p>
            </div>
        </div>

        <div id="menu">
            <ul id="contacts">
                <li>
                    <span>
                        <span class="preview">
                            <img src="path/to/alan.png" />
                            <span>Alan<br>
                                <small>Thompson</small>
                            </span>
                        </span>
                    </span>
                    <div data-mm-title="Alan Thompson">
                        <div class="details">
                            <img src="path/to/alan.png" />
                            <strong>Alan</strong>
                            <dl>
                                <dt>Name</dt>
                                <dd>Alan Thompson</dd>

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

                                <dt>Email</dt>
                                <dd>info@domain.com</dd>

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

        <script src="path/to/mmenu.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#menu", {
                        navbar: {
                            title: "My contacts"
                        },
                        searchfield: {
                            add: true,
                            addTo: "#contacts"
                        }
                    });
                }
            );
        </script>
    </body>
</html>

Next tutorial:
Thumbnail grid