Recursive Hover Nav

JavaScript

スタイリッシュなホバーナビゲーションを実装できる「Recursive Hover Nav (Only CSS)」

Recursive Hover Nav (Only CSS)は、シンプルでスタイリッシュなホバーナビゲーションを実装できるのが特徴です。ナビゲーションメニューにホバーすることで、下層にあるメニューが表示されます。滑らかで美しいアニメーションにも注目です。

Recursive Hover Nav (Only CSS)

Recursive Hover Nav (Only CSS)

デモでは「drop」と書かれたボタンがあり、ここにホバーするとその下にあるメニューが表示されます。下矢印が付いている「drop」は、ホバーすると下から上へフェードアニメーションしながらメニューが浮かび上がってきます。

さらにその中にある「settings」と「more」には右矢印が付いていて、ここにホバーすると今度は右から左へフェードアニメーションしながら子メニューが表示されます。

滑らかな動きで操作もシンプルなのでとても使いやすいナビゲーションですね。メニューが多いサイトには最適なナビゲーションになるのではないでしょうか?

また、ホバーしない限りメニューは表示されないので、サイトのデザインをゴチャゴチャさせたくない人にも嬉しい仕様といえます。

というわけで、シンプルでスタイリッシュなホバーナビゲーションを実装できる「Recursive Hover Nav (Only CSS)」の紹介でした。

Radial Progress Barsアニメーション付きのサークルプログレスバー「Radial Progress Bars」前のページ

レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadate」次のページno-image

関連記事

  1. Circular Slider
  2. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  3. no-image
  4. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  5. SweetAlert
  6. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

最近の記事

  1. ゴムの耳栓
  2. ライオンコーヒー(バニラマカダミア)
PAGE TOP