Navigation

JavaScript

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

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

Navigation

Navigation

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

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

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

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

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

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

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

関連記事

  1. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

  2. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

  3. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  4. slimMenu
  5. Bootstrap Dropdown Hover
  6. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP