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. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

  2. lightgallery.js
  3. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  4. no-image

    JavaScript

    いろんなズーム機能を実装できるjQueryプラグイン「xZoom」

    xZoomはいろんなズーム機能を実装することができるカスタマイズ性に優…

  5. jquery-calendar

    JavaScript

    レスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」

    jquery-calendarはレスポンシブに対応したスケジュール管理…

  6. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP