モバイルメニューを実装する多機能 jQuery plugin『mmenu』

2015.06.21 Category:jQuery Tag:jQuery

横スライドしてくるメニューなのですが、なかなかの多機能です。まだダウンロードしてサンプルしか見ていませんが、とても重宝しそうな予感です。

モバイルメニューを実装する多機能 jQuery plugin『mmenu』

『mmenu』の使い方

1.　まずは、head内にダウンロードしたファイルを読み込みます。

<script src="path/to/jquery.js" type="text/javascript"></script>
<script src="path/to/jquery.mmenu.min.all.js" type="text/javascript"></script>
<link href="path/to/jquery.mmenu.all.css" type="text/css" rel="stylesheet" />

2.　次にHTMLに記述

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a>
         <ul>
            <li><a href="/about/history/">History</a></li>
            <li><a href="/about/team/">The team</a></li>
            <li><a href="/about/address/">Our address</a></li>
         </ul>
      </li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

<ul>

<li><a href="/about/">About us</a>

<ul>

<li><a href="/about/history/">History</a></li>

<li><a href="/about/address/">Our address</a></li>

</ul>

</li>

<li><a href="/contact/">Contact</a></li>

</ul>

</nav>

サブメニューがある場合は、デフォルトではサブメニューも横スライドします。

3.　jQueryで要素指定し呼び出し

次に先ほどnav要素で指定したidをjQueryで要素指定し呼び出します。

<script type="text/javascript">
　　$(function() {
　　　　$('nav#menu').mmenu();
　　});
</script>

　　$(function() {

　　　　$('nav#menu').mmenu();

　　});

</script>

以上で基本的な設定は完了です。

オプションと拡張機能

『mmenu』には様々なオプションと拡張機能が用意されています。
以下はそれぞれのリンクです。

オプション

拡張機能

メニューのスライド方向を変更する

この機能を利用するには、新たに「jquery.mmenu.positioning.css」を追加して読み込むます。

下からスライドしてくるようにするには、以下のように記述します。

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         offCanvas: {
            position  : "bottom",
            zposition : "front"
         }
      });
   });
</script>

$(document).ready(function() {

$("#my-menu").mmenu({

offCanvas: {

position : "bottom",

zposition : "front"

}

});

</script>

メニューをタイル状に並べる

左のような図になります。
こちらも新たに「jquery.mmenu.tileview.css」を追加して読み込むます。

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         extensions: ["tileview"]
      });
   });
</script>

$(document).ready(function() {

$("#my-menu").mmenu({

extensions: ["tileview"]

});

</script>

アイコンありにする

左のような図になります。
こちらも新たに「jquery.mmenu.iconbar.css」を追加して読み込むます。

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         extensions: ["iconbar"]
      });
   });
</script>

$(document).ready(function() {

$("#my-menu").mmenu({

extensions: ["iconbar"]

});

</script>

サイドバーを横スライドさせない

横スライドではなくて、下にサブメニューが表示されるようになります。

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         slidingSubmenus: false
      });
   });
</script>