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. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

  2. EZ Plus

    JavaScript

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

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

  3. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  4. jQuery fullsizable
  5. Before and after slider

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP