JavaScript

立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

立体的なナビゲーション表示を実装できるjQueryプラグイン「Box Lid」が面白かったので備忘録。実際のデモでは左のナビゲーションアイコンにマウスオーバーするとメニューが立体的に表示されます。カーソルを離すとメニューは非表示になるのでコンテンツに集中させることができますね。

[ads_center]

使い方

Box Lid

このように左側のアイコンにマウスを乗せると。

Box Lid

こんな感じでナビゲーションメニューが表示されます。動きがおもしろいですね。以下、使い方です。

ダウンロードしたプラグインの読み込み。

<link rel='stylesheet' type='text/css' href='css/box-lid.css'>
<script src='js/box-lid.js'></script>

マークアップ。

<div class='box-lid-menu'>
    <div class='box-lid-icon'></div>
    <nav>
        <!-- ナビゲーション -->
    </nav>
</div>
<div class='box-lid'>
    <div class='box-lid-content'>
        <!-- コンテンツ -->
    </div>
</div>

プラグインをセット。

$(function() {
    $('.box-lid-menu').boxLid();
});

人とは違ったナビゲーションを実装したい時に覚えておきたいですね。

関連記事

  1. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  2. Progressively

    JavaScript

    画像を徐々に読み込んでくれるJSライブラリ「Progressively」

    Progressivelyは画像を徐々に読み込ませることができるJSラ…

  3. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  4. Image Lightbox
  5. Points Of Interest

    JavaScript

    各ポイントごとにクリックで詳細文を表示させるjQuery「Points Of Interest」

    Points Of Interestはサイト内に設置した各ポイントを…

  6. FSVS(Full Screen Vertical Scroller)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP