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プラグインです。

jQueryプラグインのスライダー集【jQueryプラグイン】素晴らしい機能が満載のスライダー集前のページ

画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」次のページFocusPoint

関連記事

  1. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  2. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  4. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  5. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP