Bootstrap Dropdown Hover

JavaScript

ホバーによるシンプルなドロップダウンメニューを実装できる「Bootstrap Dropdown Hover」

Bootstrap Dropdown Hoverは、ホバーによるシンプルなドロップダウンメニューを実装できるjQueryプラグインです。Bootstrapが使われています。操作・デザイン共にとてもシンプルでいろんなサイトに合いそうですね。

Bootstrap Dropdown Hover

デモ

デモではいろんなタイプのドロップボタンが設置されています。「Dropdown」というボタンにマウスオーバーすると、その直下にシンプルなメニューがサッと表示されます。

また、「Dropup」というボタンにマウスオーバーすると、ボタンの真上にメニューが表示されます。

ほかにも、ボタンの大きさが異なるタイプやタブ形式の中に組み込まれているタイプなど、さまざまなサンプルが用意されています。

オプションには、clickBehaviorとhideTimeoutという項目があります。clickBehaviorの値は、sticky、default、disableの中からセッティングできます。デフォルト値はstickyです。

また、hideTimeoutのデフォルト値は200になります。

そのほか、メソッドにはsetClickBehavior(value)、setHideTimeout(value)、destroy()が用意されています。

というわけで、Bootstrapを使ったホバーによるシンプルなドロップダウンメニューを実装できるjQueryプラグイン「Bootstrap Dropdown Hover」の紹介でした。

Bootstrap Dropdown Hover

Glide.js軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」前のページ

CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」次のページLight-Zoom

関連記事

  1. ToxicBox

    JavaScript

    さまざまなコンテンツをポップアップウィンドウで表示できる「ToxicBox」

    ToxicBoxは、ライトボックスのjQueryプラグインです。近年、…

  2. Inspiration for Menu Hover Effects
  3. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  4. jQuery Section Navi Plugin
  5. Choice.js
  6. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP