slimMenu

JavaScript

スマホやPCで多階層メニューを実装できるレスポンシブ対応のjQueryプラグイン「slimMenu」

slimMenuというjQueryプラグインを使えば、スマホやPCの両方で多階層メニューを実装することができます。レスポンシブ対応になっているので、いろんなデバイスからでもメニューが操作しやすいです。メニューがたくさんあるサイトで使ってみたいですね。

[ads_center]

slimMenuの使い方

slimMenu

こんな感じで多階層のドロップダウンメニューを実装することができます。

slimMenu

レスポンシブに対応しているので、画面を縮小していくとこのようにメニューがスマホ用に最適化されます。

レスポンシブ対応

シンプルですがとても使い勝手のいいメニューです。余計な手間をかけなくても、これだけでPCとスマホの両方で多階層メニューを実現することができちゃいます。

使い方も分かりやすいですし、オプションもいろいろと用意されています。

$('#navigation').slimmenu(
{
    resizeWidth: '800',
    collapserTitle: 'Main Menu',
    animSpeed: 'medium',
    easingEffect: null,
    indentChildren: false,
    childrenIndenter: ' '
});

というわけで、レスポンシブ対応の多階層メニューを実装できるjQueryプラグイン「slimMenu」のご紹介でした。

新鮮なフリーフォント集新鮮なフリーフォント集(2014年8月)前のページ

おしゃれでアイディアに満ち溢れたデザインの本棚次のページ

関連記事

  1. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  2. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  3. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

  4. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  5. PreViewTube.js
  6. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP