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)といった項目も用意されているほか、メニューメソッドもいろいろあるので気になる人はぜひチェックしてみてください。

関連記事

  1. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

  2. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  3. jQuery Glow
  4. PrognRoll

    JavaScript

    スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」

    PrognRollはスクロールによるプログレスバーを表示することができ…

  5. Responsive Sidebar Navigation
  6. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP