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

『mmenu』の使い方
1. まずは、head内にダウンロードしたファイルを読み込みます。
1 2 3 |
<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に記述
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
サブメニューがある場合は、デフォルトではサブメニューも横スライドします。

3. jQueryで要素指定し呼び出し
次に先ほどnav要素で指定したidをjQueryで要素指定し呼び出します。
1 2 3 4 5 |
<script type="text/javascript"> $(function() { $('nav#menu').mmenu(); }); </script> |
以上で基本的な設定は完了です。
オプションと拡張機能
『mmenu』には様々なオプションと拡張機能が用意されています。
以下はそれぞれのリンクです。
メニューのスライド方向を変更する
この機能を利用するには、新たに「jquery.mmenu.positioning.css」を追加して読み込むます。
下からスライドしてくるようにするには、以下のように記述します。
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(document).ready(function() { $("#my-menu").mmenu({ offCanvas: { position : "bottom", zposition : "front" } }); }); </script> |
メニューをタイル状に並べる

左のような図になります。
こちらも新たに「jquery.mmenu.tileview.css」を追加して読み込むます。
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function() { $("#my-menu").mmenu({ extensions: ["tileview"] }); }); </script> |
アイコンありにする

左のような図になります。
こちらも新たに「jquery.mmenu.iconbar.css」を追加して読み込むます。
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function() { $("#my-menu").mmenu({ extensions: ["iconbar"] }); }); </script> |
サイドバーを横スライドさせない

横スライドではなくて、下にサブメニューが表示されるようになります。
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function() { $("#my-menu").mmenu({ slidingSubmenus: false }); }); </script> |
この他に、テーマを変更するなどたくさんありますので、下記リンクより見てみてください。
実際にカスタマイズ
以下のリンクから、実際にオプションや拡張を設定するとページの最後にHTMLが生成されます。
WordPress plugin
この『mmenu』は、WordPress pluginとしても配布されています。
検索してみましたが表示されなかったので公式にはないようなので下記リンクよりダウンロードしてアップロードする手順になります。

まだまだ書ききれないほどの機能が満載です。
スマホメニューどうしようかなと思っておられるならこれは参考になること間違いなしだと思います。