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. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  2. mmenu

    JavaScript

    スマホアプリのように横からスライドするメニューのjQueryプラグイン「mmenu」

    mmenuというjQueryプラグインを使えば、スマホアプリのように横…

  3. no-image
  4. characterCounter

    JavaScript

    文字数のカウントや制限ができるjQueryプラグイン「characterCounter」

    characterCounterは文字数をカウントしてくれるシンプルな…

  5. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

  6. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP