[JS]スライドさせるだけでなくもう一手間加えて、ぐぐぐっとかっこよくナビを表示するスクリプト -Box Lid Menu
Post on:2013年8月1日
sponsorsr
最近よく見かける左のパネル状のナビゲーションをアニメーションでスライド表示させるエフェクト。
ほとんどのものは単にスライドしてナビゲーションを表示するだけですが、エフェクトを加えちょっとダイナミックにしたアニメーションがかっこいいjQueryのプラグインを紹介します。
Box Lid Menu
Box Lid Menu -GitHub
Box Lid Menuのデモ
スクリプトのページ自体がデモページになっています。
左端のナビゲーションのアイコンがあるバーをホバーすると、かっこいいアニメーションでスライドします。
CSS3非対応ブラウザの人用にアニメーションgifを作ってみました。
デモのアニメーション
コンテンツは斜めに傾き、3Dにぐぐぐっとスライドし、ページに奥行きが生まれます。
スクリプトのアイデアとなったのはToyboxのサイトで、こちらでも同様のエフェクトを楽しむことができます。
Box Lid Menuの使い方
Step 1: 外部ファイル
当スタイルシートをhead内に、スクリプトを</body>の上あたりに外部ファイルとして記述します。
<head>
...
<link rel='stylesheet' type='text/css' href='css/box-lid.css'>
</head>
<body>
...
...
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='js/jquery.box-lid.min.js'></script>
</body>
Step 2: HTML
左のナビゲーションとコンテンツをdiv要素などで配置し、並列の構造で実装します。
<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>
Step 3: JavaScript
jQueryのセレクタで左のナビゲーションを指定し、スクリプトを実行します。
<script>
$(function() {
$('.box-lid-menu').boxLid();
});
</script>
sponsors
