Expanding Bar Navigation Concept

JavaScript

コンテンツエリアがダイナミックに開かれる「Expanding Bar Navigation Concept」

Expanding Bar Navigation Conceptは、コンテンツエリアがアニメーションによりダイナミックに開かれるのが特徴です。横型(または縦型)アコーディオンのような感じで、バーをクリックすることで目的のコンテンツを開くことができます。

Expanding Bar Navigation Concept

デモ

デモページでは全部で3つのデモを確認することができます。ページの下部に1、2、3と書かれた数字があるので、ここから好きなデモに移動できます。

1と2のデモではバーが横に並んでおり、いずれかのバーをクリックすると、左から右へ滑らかなアニメーションとともにコンテンツがダイナミックに開かれます。デモ1は優雅で落ち着いた印象のアニメーションです。デモ2はコンテンツが開かれるスピードが速いのでとてもスタイリッシュに動作します。

また、デモ3はページ下部にハンバーガーアイコンのようなものが表示されており、ここをクリックすると縦に並んだメニューバーが表示されます。

いずれかのバーを選択すると、そこを基点にコンテンツが開かれる仕組みです。コンテンツが開かれると右上に下矢印のアイコンが表示され、ここをクリックするとコンテンツを閉じることができます。

画面全体が一気に切り替わるアニメーションは、注目せずにはいられないですね。バーを基点にダイナミックにコンテンツが開かれる、かっこいいページを作りたいという人は、ぜひ「Expanding Bar Navigation Concept」をチェックされてみてはいかがでしょうか。

Expanding Bar Navigation Concept

関連記事

  1. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  2. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  3. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  4. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  5. jQueryプラグイン

    JavaScript

    jQueryプラグイン・2014年下半期70選まとめ

    今年も残すところ後わずかとなってしまいました。というわけで、2014年…

  6. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

最近の記事

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

アーカイブ

PAGE TOP