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

サイト構築 -JavaScript

Post on:2013年5月16日

mmenuのデモ

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

mmenu

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

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

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

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

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

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

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

mmenuの使い方

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

tutorial

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
   }
});