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

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

  3. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  4. JavaScript

    サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」…

    Material Menuはサイドからスライド開閉するレスポンシブ対応…

  5. Bootstrap Carousel Touch Slider with Text Animation
  6. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP