Stripe.Com Navigation

JavaScript

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

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

Stripe.Com Navigation

デモ

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

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

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

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

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

Stripe.Com Navigation

関連記事

  1. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  2. jQuery Video Extend

    JavaScript

    動画をチャプターごとに区切れる「jQuery Video Extend」

    jQuery Video Extendは動画をチャプターごとに区切った…

  3. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  4. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

  5. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  6. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP