[JS]スマフォアプリのように左右にスライドしてコンテンツを表示するスクリプト -mmenu

スマフォのアプリケーションでよく見かけるように、メインコンテンツから左右にスライドさせて別のコンテンツを表示するjQueryのプラグインを紹介します。

また、デモページに面白いテクニックが使われているので、それも是非!

サイトのキャプチャ

mmenu

mmenuのデモ

スクリプトの動作も快適ですが、デモページ自体にも面白い仕組みがあります。
スクリプトのデモは、画面の左のスマフォのモックアップです。

サイトのキャプチャ

mmenu

上部バー左のナビゲーションのボタンをクリック・タップしてみます。

サイトのキャプチャ

左からナビゲーションのパネルがアニメーションでスライドします。
戻る時は、元のボタンをクリック・タップします。

続いて、右の人物のボタンをクリック・タップしてみます。

サイトのキャプチャ

今度は、右からパネルがスライドします。

ページの面白い仕組みは、ページをスクロールしてみてください。

サイトのキャプチャ

背景のカラーがフェードで変更されます。

コンテンツが6つあるので、カラーも6種類用意されています。

サイトのキャプチャ

mmenuの使い方

スクリプトの使い方は下記ページにステップごとの解説があります。

Step 1: 外部ファイル

head内に「jquery.js」と当スクリプト・スタイルシートを記述します。

<head>
   <script type="text/javascript" language="javascript"
      src="jquery.js"></script>
   <script type="text/javascript" language="javascript"
      src="jquery.mmenu.js"></script>
   <link type="text/css" media="all" rel="stylesheet"
      href="jquery.mmenu.css" />
</head>

Step 2: HTML

コンテンツの基本構造は、下記のようになります。
ほとんどのページが特にHTMLを変更せずに利用できると思います。あるとすれば、一番外側のラッパーのdivを追加でしょうか。

<body>
   <div> <!-- the wrapper -->
      <div id="header">
         ...
      </div>
      <div id="content">
      	...
      </div>
      <div id="footer">
      	...
      </div>
   </div>
</body>

左に表示するナビゲーションはリストでOKです。nav要素は呼び出せるようにidなどを付与しておきます。

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

Step 3: JavaScript

スライドで呼び出す時はjQueryのセレクタでその要素を指定し、スクリプトを実行します。

$("#my-menu").mmenu({
   // options go here...
});

オプション

スクリプトのオプションでは、アニメーションのタイミングやノードなどが設定できます。

$("#nav").mmenu({
   slidingSubmenus  : true,
   closeOnClick     : true,
   position         : "left",
   configuration    : {
      selectedClass    : "Selected",
      pageNodetype     : "div",
      menuNodetype     : "nav",
      slideDuration    : 500
   }
});

top of page

©2017 coliss