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

関連記事

  1. no-image

    JavaScript

    シンプル・軽量なjQueryイメージビューア「WimmViewer」

    WimmViewerはシンプルで軽量なイメージビューアを実装できるjQ…

  2. Maximum Characters limit exceeded warning
  3. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

  4. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  5. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP