[JS]多階層のナビゲーションを今風にサイドを利用して実装するスクリプト -MultiLevel Push Menu

タブレットによさそうな、もちろんスマフォやデスクトップ（IE8にも）対応しているナビゲーションの各階層を次々に押し出して重ねて表示するjQueryのプラグインを紹介します。

Multi-level push menu
MultiLevel Push Menu -GitHub

• MultiLevel Push Menuのデモ
• MultiLevel Push Menuの使い方

MultiLevel Push Menuのデモ

デモChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは8+でご覧ください。
Android, iOSなどのスマフォ・タブレットにも対応しています。

Demo: Basic

ナビゲーションは左サイドで、まずはミニマルサイズに変更できます。

子階層をもったラベルを選択すると、その階層を押し出して、親階層に重ねます。

さらに、孫の階層を選択すると、子と親を重ねます。

ナビゲーションだけを拡大すると、こんな感じに。

デモでは、さまざまなバリエーションが用意されています。
このデモはナビゲーションをリスト要素ではなく、JSの配列で実装したもの。

Demo: Basic JS

見た目的にも、オプションが用意されています。
これはナビゲーションのサイズを指定したデモ。

Demo: Custom Size

同じように階層が重なります。

押し出すのはコンテナも可能です。

Demo: Push many containers

複数のコンテナを押し出します。

MultiLevel Push Menuの使い方

アイデアの元となっているのは、こちらのデモ。

• MULTI-LEVEL PUSH MENU

実装はより簡単に、オプションも豊富に進化しています。

Step 1: 外部ファイル

jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

<link rel="stylesheet" href="multilevelpushmenu.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.multilevelpushmenu.min.js></script>

IE8をサポートする際は、Modernizrを加えます。

<script src="//oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>

Step 2: HTML

ナビゲーションは多階層に対応しており、リストの入れ子で実装します。

<div id="menu">
  <nav>
    <ul>
        <li>
            <a href="#"><i class="fa fa-laptop"></i>第一階層</a>
            <h2><i class="fa fa-laptop"></i>第一階層</h2>
            <ul>
                <li>
                    <a href="#"><i class="fa fa-phone"></i>第二階層</a>
                    <h2><i class="fa fa-phone"></i>第二階層</h2>
                    <ul>
                        <li><a href="#">アイテム</a></li>
                        <li><a href="#">アイテム</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><i class="fa fa-laptop"></i>第一階層</a>
            <h2><i class="fa fa-laptop"></i>第一階層</h2>
            <ul>
                <li>
                    <a href="#"><i class="fa fa-phone"></i>第二階層</a>
                    <h2><i class="fa fa-phone"></i>第二階層</h2>
                    <ul>
                        <li><a href="#">アイテム</a></li>
                        <li><a href="#">アイテム</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">第一階層</a>
        </li>
        <li>
            <a href="#">第一階層</a>
        </li>
    </ul>
  </nav>
</div>

各アイテムはJavaScriptの配列で実装することもできます。

Step 3: JavaScript

ラッパをjQueryのセレクタで指定し、スクリプトを実行します。

 <script>
    $(document).ready(function(){
            $('#menu').multilevelpushmenu();
        });
    </script>  

オプションでは重ねや押し出しの有無、ナビゲーションのサイズなどを設定できます。