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. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  2. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  3. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  4. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

  5. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP