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. jQuery fullsizable
  2. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  3. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

  4. Animocons

    JavaScript

    アイコンに素敵なアニメーションを実装できる「Animocons」

    Animoconsはアイコンにさまざまなアニメーションを加えることがで…

  5. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  6. Slyder

    JavaScript

    レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

    Slyderはレスポンシブに対応したスライダーナビゲーションを実装でき…

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP