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. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  2. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  3. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

  4. no-image

    JavaScript

    インタラクティブなツリー機能を実装できる「jstree」

    jstreeはインタラクティブなツリー機能を実装できるjQueryプラ…

  5. jQuery liMarquee
  6. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP