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

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  2. Flipster

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

    レスポンシブにも対応しているシンプルなカルーセルを実装できるjQuer…

  3. Material Design Responsive Table
  4. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  5. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  6. AJAX Live Search

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP