Navigation

JavaScript

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

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

Navigation

Navigation

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

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

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

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

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

関連記事

  1. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  3. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  4. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  5. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  6. PopCircle

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP