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」のご紹介でした。

関連記事

  1. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  2. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  3. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  4. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  5. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  6. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP