Stripe.Com Navigation

JavaScript

コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウンナビゲーション「Stripe.Com Navigation」をご紹介します。メニューのコンテンツに合わせてコンテナのサイズがアニメーションで変化するのが特徴です。

Stripe.Com Navigation

デモ

デモでは画面上部にAbout、Pricing、Contactの3つのメニューが並んでいます。各メニューにマウスオーバーすると、オシャレなアニメーションとともにドロップダウンでリストが表示されます。

さらに、隣接するメニューへマウスオーバーすると、そのメニューのコンテンツに合わせてコンテナサイズが変化するのを確認できるかと思います。

滑らかに変化していくアニメーションがとても素敵ですね。ストレスなく快適なナビゲーション操作を実現しています。

ドロップダウンで見たいときにマウスオーバーすることで子リストを表示させることにより、サイト内のデザインもスッキリしますね。ちなみにデモページはレスポンシブにも対応しています。

というわけで、コンテナがアニメーションで可変するオシャレで便利なドロップダウンナビゲーションを実装したい人は、ぜひチェックしてみてはいかがでしょうか。

Stripe.Com Navigation

関連記事

  1. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  2. Blindify
  3. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

  4. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

  5. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  6. jQuery fullsizable

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP