mmenuは、スマホサイトやアプリでよくある、横からメニューをスライドさせて表示するjQueryプラグインです。
ここではシンプルなメニュー表示と、様々な要素を表示させることが出来るツールチップの使い方をご紹介します。
ライセンスはMIT & GPL のデュアルライセンス。
※商用利用は有料になったようです(2019年11月追記)

基本的な使い方

一番シンプルな左からメニューをスライドさせる方法です。
配布サイトからファイルをダウンロードします。
ダウンロードファイルの中には色々入っていますが、必要なファイルはCSSとJSファイルの2点です。
必要なファイル
jquery.mmenu.css
jquery.mmenu.min.js
必要なファイルを読み込む
<link rel="stylesheet" href="jquery.mmenu.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.mmenu.min.js"></script>
htmlの記述
メニューとして表示させたい部分を任意のidを付与して囲います。ここでは id=”menu” の部分です。
htmlの記述のポイントは、メニューを表示させるためのボタンと、メニューが同じ親要素(ここでは#wrap)で囲われているかです。
また、その親要素の外に要素があると、メニューを表示した時に下の方に見切れたりする場合があるので、フッターなども含めて囲う要素がありそうです。
<div id="wrap">
<header>
<a class="menu-btn" href="#menu"></a>
<a class="tooltip-btn" href="#tooltip"></a>
<h1>mmenu</h1>
</header>
<div id="main">
メインエリア
<!--/ #main--></div>
<nav id="menu">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Mail</a></li>
</ul>
</nav>
<footer><p class="back"><a href="/">back to top</a></p></footer>
<!--/ #wrap--></div>
プラグインを実行させるためのjQueryの記述
スライドさせるメニューを囲ったidをセレクターで指定します。
$(function() {
$('#menu').mmenu();
});
メニューに階層をつける

メニューに階層をつけることも可能です。
デフォルトは水平にスライドさせて子メニューを表示し、オプションでドロップダウンのようにさせることが出来ます。
今回はドロップダウンバージョンをご紹介します。
必要なファイルを読み込む
CSSはシンプルバージョンの時と違う「jquery.mmenu.all.css」を読み込んでいるので注意してください。
<link rel="stylesheet" href="jquery.mmenu.all.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.mmenu.min.js"></script>
htmlの記述
リストタグを入れ子にして子メニューを作ります。その他はシンプルバージョンと同じです。
親になる要素はaタグかspanタグで囲ってください。
<div id="wrap">
<header>
<a class="menu-btn" href="#menu"></a>
<a class="tooltip-btn" href="#tooltip"></a>
<h1>mmenu</h1>
</header>
<div id="main">
メインエリア
<!--/ #main--></div>
<nav id="menu">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Mail</a></li>
<li>
<span>drop down menu</span>
<ul>
<li><a href="#">Submenu1</a></li>
<li><a href="#">Submenu2</a></li>
<li><a href="#">Submenu3</a></li>
</ul>
</li>
<li>
<a href="#">link menu</a>
<ul>
<li><a href="#">Submenu1</a></li>
<li><a href="#">Submenu2</a></li>
<li><a href="#">Submenu3</a></li>
</ul>
</li>
</ul>
</nav>
<footer><p class="back"><a href="/">back to top</a></p></footer>
<!--/ #wrap--></div>
プラグイン用の記述
オプションでドロップダウン風に表示させるよう設定します。
何も指定しなければ水平にメニューがスライドされます。
$(function() {
$('#menu').mmenu({
slidingSubmenus: false //入れ子のメニューをドロップダウン風にする
});
});
ツールチップ風にする

メニュー以外の要素もも表示させることができます。
例ではカラーテーマを変更し、右からスライドさせるようにしています。
必要なファイルを読み込む
CSSは「jquery.mmenu.all.css」を読み込みます。
<link rel="stylesheet" href="jquery.mmenu.all.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.mmenu.min.js"></script>
htmlの記述
ツールチップとして表示させたい要素をdivで囲い、任意のidを付与します。
更にプラグイン側でclassを付与するためのdivで囲います。
12行目は閉じるボタン用の記述です。なくてもOKです。
<div id="wrap">
<header>
<a class="menu-btn" href="#menu"></a>
<a class="tooltip-btn" href="#tooltip"></a>
<h1>mmenu</h1>
</header>
<div id="main">
メインエリア
<!--/ #main--></div>
<div id="tooltip">
<div>
<a href="#" class="close">×</a>
<h2>タイトル</h2>
<p>ここには自由にhtmlを記述出来ます。<br />画像も入れられます。</p>
<img src="../images/modal/thumb-01.jpg" />
<img src="../images/modal/thumb-02.jpg" />
<img src="../images/modal/thumb-03.jpg" />
<img src="../images/modal/thumb-04.jpg" />
</div>
</div>
</nav>
<footer><p class="back"><a href="/">back to top</a></p></footer>
<!--/ #wrap--></div>
プラグイン用の記述
$(function() {
$('#tooltip').mmenu({
classes: 'mm-light', //カラーテーマ変更
position:'right', //右から開く
zposition: 'next' //スライドさせる位置
});
$('a.close').click(function() {
$(this).closest( '.mm-menu' ).trigger( 'close' ); //閉じるボタン
});
});