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)」の紹介でした。

関連記事

  1. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  2. Ace Responsive Menu
  3. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  4. qpScroll
  5. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  6. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP