Erge Drop Down Menu Control

JavaScript

エレガントなドロップダウンメニューを実装できる「Erge Drop Down Menu Control」

Erge Drop Down Menu Controlはエレガントなドロップダウンメニューを実装できます。通常のulリストを拡張メニューもしくはドロップダウンメニューに変換してくれるのが特徴です。selectメニュー代わりとしてだけではなく、各セクションに素早くジャンプできる目次などといったいろんな用途に活用できますね。

Erge Drop Down Menu Control

Erge Drop Down Menu Control

デモは2つ用意されています。各デモにある「Select a Value」というボタンをクリックすると、ドロップダウンメニューが表示される仕組みです。

左側のデモでは「Select a Value」ボタンの領域内にメニューが表示されるので、その下にあるボックスの位置もそれに合わせて移動します。一方、右側のデモではボックスの配置はそのままで、ボックスの上に被さるようにメニューがドロップダウン表示されます。

自サイトのデザインやレイアウトに合わせて最適なセッティングをしたいですね。

デモではメニューから任意の項目を選択するとボックス内にその値が表示されます。

マークアップもulのリスト形式で記述していくのでとても簡単に使えるのがグッドです。また、オプションにはdropid、overlay、onselect($selected)といった項目も用意されているほか、メニューメソッドもいろいろあるので気になる人はぜひチェックしてみてください。

no-imageウィークデイ(週)のオプションを作成できる「jquery-weekdays」前のページ

Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」次のページno-image

関連記事

  1. no-image
  2. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

  3. Chameleon.js
  4. Recursive Hover Nav
  5. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  6. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP