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

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  2. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  3. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  4. JavaScript

    とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

    使いやすさや見た目もシンプルで綺麗なツールチップを実装することができる…

  5. ScrollMenu.js

    JavaScript

    縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」

    ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しい…

  6. SuperEmbed.js

    JavaScript

    さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

    SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブ…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP