簡単にスライドメニューを実装できるjQuery.Mmenuを試してみました

簡単にスライドメニューを実装できるjQuery.Mmenuというのを知ったので試してみました。

公式サイトはこちらです。
http://www.hongkiat.com/blog/jquery-mmenu-sliding-menu/

Getting Startedの辺りにあるリンクから必要なファイルをダウンロードできます。

Zipファイルの中はこんな感じでした。

実際に使用するJSファイルやCSSファイルはsrcフォルダ内に入っています。demoフォルダではどのような画面を実装できるか確認するためのファイル一式が入っていました。

デモ画面として用意されているファイルは以下のとおりです。

• index.html
• horizontal-submenus.html
• vertical-submenus.html
• photos.html
• positions.html
• colors.html
• advanced.html
• onepage.html

このファイルの他にもjQueryMobile用のデモページが用意されていました。

index.html

このページからそれぞれのページにアクセスできます。

horizontal-submenus.html

横スライドでサブメニューを表示できます。

vertical-submenus.html

縦方向にサブメニューを表示できます。

photos.html

画像のリストを表示できます。

こういう表示もできるみたいです。

positions.html

メニューの位置や表示タイプの切替ができます。

colors.html

メニューの色を変更できます。

advanced.html

こんな機能のサンプルです。

onepage.html

同じページ内に移動するリンクのサンプルページです。

jQueryMobile

jQueryMobile向けのページみたいです。

サンプルページはこんな感じでした。
すごく便利そうです。