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. DropDownMenu

    JavaScript

    レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

    DropDownMenuは、レスポンシブに対応した多階層なドロップダウ…

  2. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  3. Notyf

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

  4. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  5. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  6. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP