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. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

  2. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  3. no-image

    JavaScript

    セクション間をスムーズにスクロールできる「Scroll Control」

    Scroll Controlはセクション間をスムーズにスクロールできる…

  4. Stretchy

    JavaScript

    入力した文字数に合わせて可変するフォーム実装「Stretchy」

    Stretchyは入力した文字数に合わせてボックスが伸び縮みするフォー…

  5. Swipe-Li

    JavaScript

    スマホ操作に最適!左右のスワイプで有効・無効を選べるjQueryプラグイン「Swipe-Li」

    Swipe-LiというjQueryプラグインを使えば、左右のスワイプで…

  6. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

最近の記事

  1. 岩木山
  2. パーソナルパーティション

アーカイブ

PAGE TOP