Stripe.Com Navigation

JavaScript

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

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

Stripe.Com Navigation

デモ

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

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

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

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

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

Stripe.Com Navigation

Inspiration for Letter Effects印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」前のページ

画像を徐々に読み込んでくれるJSライブラリ「Progressively」次のページProgressively

関連記事

  1. LoadGo

    JavaScript

    画像をプログレスバー(ローディング)にできるjQueryプラグイン「LoadGo」

    LoadGoはサイト内にあるロゴなどといった画像をプログレスバー(ロー…

  2. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  3. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  4. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  5. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP