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

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

    stackyというjQueryプラグインを使えばコンテンツをスライドダ…

  2. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  3. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  4. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  5. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  6. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

最近の記事

  1. ハムエッグホットサンドとドリップコーヒー
  2. 高輪ゲートウェイ駅のスタバ
  3. 新幹線
  4. リッチモンドホテル
  5. ハーブバターチキン 石窯フィローネとドリップコーヒー

アーカイブ

PAGE TOP