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. Basic Metro Dynamic jQuery Tab Menu
  2. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  3. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  4. jquery.simple-scroll-follow
  5. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP