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

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

[ads_center]

使い方

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

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

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

<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();
});

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

Box Lid