[JS]スライドさせるだけでなくもう一手間加えて、ぐぐぐっとかっこよくナビを表示するスクリプト -Box Lid Menu

Post on:2013年8月1日

最近よく見かける左のパネル状のナビゲーションをアニメーションでスライド表示させるエフェクト。
ほとんどのものは単にスライドしてナビゲーションを表示するだけですが、エフェクトを加えちょっとダイナミックにしたアニメーションがかっこいいjQueryのプラグインを紹介します。

サイトのキャプチャ

Box Lid Menu
Box Lid Menu -GitHub

Box Lid Menuのデモ

スクリプトのページ自体がデモページになっています。

デモのキャプチャ

デモページ

左端のナビゲーションのアイコンがあるバーをホバーすると、かっこいいアニメーションでスライドします。

CSS3非対応ブラウザの人用にアニメーションgifを作ってみました。

デモのアニメーション

デモのアニメーション

コンテンツは斜めに傾き、3Dにぐぐぐっとスライドし、ページに奥行きが生まれます。

スクリプトのアイデアとなったのはToyboxのサイトで、こちらでも同様のエフェクトを楽しむことができます。

サイトのキャプチャ

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

top of page

©2024 coliss