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. jQuery Glow
  2. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  3. Simple Lightbox
  4. no-image

    JavaScript

    3Dキューブによる画像ギャラリー「3D Cube Image Gallery」

    3D Cube Image Galleryは、3Dキューブによるオシャ…

  5. ToxicBox

    JavaScript

    さまざまなコンテンツをポップアップウィンドウで表示できる「ToxicBox」

    ToxicBoxは、ライトボックスのjQueryプラグインです。近年、…

  6. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP