Introduction
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.
Setup the menu
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"
},
offCanvas: {
position: "right-front"
}
});
}
);
</script>
Result
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 open 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"
},
offCanvas: {
position: "right-front"
}
});
}
);
</script>
</body>
</html>