立体的なナビゲーション表示を実装できる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();
});
人とは違ったナビゲーションを実装したい時に覚えておきたいですね。
