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

Simple HTML Menuモバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」前のページ

プレースホルダに多彩なアニメーションエフェクトを付けれる「Foxholder」次のページFoxholder

関連記事

  1. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  2. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  3. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

  4. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  5. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  6. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

最近の記事

  1. チキン&グリーンサンドイッチ
  2. アートアクアリウム美術館 GINZA
  3. オケラ
  4. デンタルプロ 歯間ブラシ
  5. ダミアン・ハースト 桜
PAGE TOP