Navigation

JavaScript

コンテンツを押し出してナビゲーションを表示する「Navigation」

Navigationはコンテンツを押し出すかたちでナビゲーションを表示できるのが特徴です。ナビゲーションが横からグイッと出てきて、それに合わせてコンテンツが縮小されるとともに横に押し出されます。

Navigation

Navigation

デモでは、左上にハンバーガーメニューが設置されていて、ここをクリックするとナビゲーションが左から出現します。ハンバーガーメニューをクリックすると、コンテンツ部分が縮小して右側へ押し出されます。そして、左側に生まれたスペースにナビゲーションメニューが表示されるという仕組みです。

ナビゲーションの領域が広く確保されるのでとても見やすいですね。元に戻す場合は再度ハンバーガーメニューをクリックすればOKです。

ナビゲーションは通常は隠れているのでその分コンテンツに集中しやすくなります。メニューにアクセスしたい時だけサッと表示させれるので、ジャマにならず快適にページを閲覧できますね。

どことなくMacのMission Controlを彷彿とさせるアニメーションだと思いました。

というわけで、コンテンツを押し出してできた領域にナビゲーションを表示できる「Navigation」の紹介でした。

no-image粒子のように分裂していくパーティクルエフェクト「Particle Effects for Buttons」前のページ

立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」次のページno-image

関連記事

  1. Expanding Bar Navigation Concept
  2. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

  3. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  4. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  5. no-image
  6. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

最近の記事

  1. Anker PowerPort 5-in-1 37.5W Hub
  2. α7C + FE28-60mm F4-5.6
  3. Apple Watch Series 6
  4. iPad Air

アーカイブ

PAGE TOP