Multi-Level Push MenuはJavaScript製のソフトウェア(ライセンスは独自。利用は自由)です。

Webサイトのメニュー表示はいかに深い階層であって素早くアクセスできるかが大事です。そこで今回はMulti-Level Push Menuを紹介します。スマートフォンに似たスムーズなメニュー表示が特徴です。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 10.51.29_thumb.1376913800.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 10.51.29.1376913800.png)
一例。オープンすると左からメニューが表示されます。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 10.51.48_thumb.1376913805.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 10.51.48.1376913805.png)
深い階層に行く度に左からメニューが追加(プッシュ)されてきます。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 10.52.06_thumb.1376913808.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 10.52.06.1376913808.png)
こちらは別なメニュー。同じ幅で上書きされて、上にBackリンクが表示されます。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 10.52.24_thumb.1376913812.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 10.52.24.1376913812.png)
こちらの場合は上記二つを組み合わせたスタイルになっています。

親メニューが右側に残っているパターンですと、そこをクリックして複数階層を一気に戻れるようになっています。アパレルやコマースなどジャンルの多い商品を扱ったサイトなどに導入すると便利そうです。

MOONGIFTはこう見る

Multi-Level Push Menuはスマートフォンやタブレットでよく採用されている左側から表示されるメニューを模しています。深いメニューを辿るのは苦痛ですが、Multi-Level Push Menuの場合はメニュー部だけが変わるので素早く遷移できるのが利点です。

WebにおいてはこれまでユニークなURLを持つことが重視されてきましたが、素早い情報提供を考えるならばAjaxやJavaScriptによって必要な部分だけを書き換える方が良いでしょう。そうすればユーザストレスも少なく、滞在時間も長くなるはずです。

Multi-Level Push Menu - Demo 1

codrops/MultiLevelPushMenu