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

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

  2. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  3. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

  4. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

  5. JavaScript

    レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox…

    とても有名なプラグインですが、今まで使ってみたことがなかったので試して…

  6. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

最近の記事

  1. PDA-STN36S
  2. クッキー&クリーム ポップコーン
  3. マウイチップス マウイオニオン味
  4. グリーンビーントゥーバー
  5. VS-543AS

アーカイブ

PAGE TOP