no-image

JavaScript

立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

Sidebar Menu Conceptは立体的なナビゲーションメニューを実装できます。フリップするようにメインコンテンツが傾き、サイドからナビゲーションメニューが表示される仕組みです。3Dのような立体感あるナビゲーションメニューを作りたい人には最適ですね。

Sidebar Menu Concept

Sidebar Menu Concept

デモでは左上に「MENU」ボタンが設置されていて、ここにマウスオーバーすると画面が少し傾きます。そのままクリックするとフリップするように画面右側の方が奥に引っ込んでいき、それと同時に左側からナビゲーションメニューが表示されます。

コンテンツ部分が奥に引っ込むことでナビゲーションに意識がグッと向きますね。奥行き感があり立体的でとても素敵なアニメーションです。元に戻す場合は、再度「MENU」ボタンをクリックすればOKです。

というわけで、コンテンツ部分が立体的に傾くと同時にサイドからナビゲーションメニューが表示される「Sidebar Menu Concept」の紹介でした。

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

シンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」次のページno-image

関連記事

  1. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  2. Docked Link jQuery Plugin
  3. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  4. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  5. no-image

    JavaScript

    いろんなズーム機能を実装できるjQueryプラグイン「xZoom」

    xZoomはいろんなズーム機能を実装することができるカスタマイズ性に優…

  6. Responsive Elements

最近の記事

  1. 生ハム&モッツァレラチーズ サラダラップ
  2. コガネムシ
  3. ショルダーハム&5種の野菜サンドイッチ
  4. ジョン・リーチ マグカップ
PAGE TOP