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

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

  2. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  3. elmenu

    JavaScript

    レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

    elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装す…

  4. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS
  5. CSS Jquery Pie Countdown Timer

    JavaScript

    グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Time…

    円形によるカウントダウンのタイマーを実装する「CSS Jquery P…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP