mmenu

JavaScript

スマホアプリのように横からスライドするメニューのjQueryプラグイン「mmenu」

mmenuというjQueryプラグインを使えば、スマホアプリのように横からスライドするメニューを実装することができます。実際のデモではレスポンシブになっており、画面を縮小するとメニューがアイコンに切り替わります。このアイコンをクリックすると横からメニューがスライド表示されます。メニューが多階層にも対応しているのがいいですね。

[ads_center]

mmenuの使い方

mmenu

mmenu

使い方は、まずhead内に以下のjQuery本体とプラグインファイルを読み込みます。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.mmenu.min.js" type="text/javascript"></script>
<link href="jquery.mmenu.css" type="text/css" rel="stylesheet" />

HTMLはこんな感じでシンプルに記述することができます。

<nav id="sample">
    <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
    </ul>
</nav>

あとはmmenuを呼び出してあげるだけです。

$(document).ready(function() {
    $("#sample").mmenu();
});

デザイン・機能ともにシンプルで操作しやすいナビゲーションメニューですね。レスポンシブなWebサイトを作る時に活用してみたいjQueryプラグインです。

関連記事

  1. Circular Slider
  2. LoadGo

    JavaScript

    画像をプログレスバー(ローディング)にできるjQueryプラグイン「LoadGo」

    LoadGoはサイト内にあるロゴなどといった画像をプログレスバー(ロー…

  3. Image Figure Caption effects
  4. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

  5. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  6. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP