ぷにおちゃん～コンテンツを斜めにアニメーション表示するBox Lid Menuを試してみる

はじめに

Box Lid Menuは、サイドに配置されたボタンをクリックするとサイドメニューが表示され、それに合わせてコンテンツを斜めに表示できるJQueryプラグインです。

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエア	バージョン
OS	Windows 7 Ultimate 32bit
Cygwin	Setup Version 2.831

Box Lid Menuの使用方法

環境設定

設置に必要なアーカイブをダウンロードし、解凍します。

$ cd /tmp/demo
$ wget -q https://github.com/jimjh/box-lid/archive/master.zip
$ unzip -q master.zip
$ rm -f master.zip
$ mv box-lid-master box-lid

CSSファイルの指定

box-lid.cssおよび、box-lid-nav.cssを指定します。

<link href="box-lid/css/box-lid.css" rel="stylesheet">
<link href="box-lid/css/box-lid-nav.css" rel="stylesheet">

jsファイルの指定
jquery.box-lid.jsを指定します。追加します。
```
<script src="box-lid/js/jquery.box-lid.min.js"></script>
```

コンテンツの作成

Box Lid Menuでは、下記のクラスを使用してコンテンツを作成します。

クラス	概要
box-lid-menu	サイドバーに表示する見出しを定義します。
box-lid-icon	サイドバーに表示するアイコンを定義します。
box-lid	サイドバーの見出しに対応するコンテンツを定義します。

<div class="box-lid-menu">
  <div class="box-lid-icon"></div>
  <nav>
    <h6>Table of Contents</h6>
      <ul>
        <li><a href="#chap1">Chapter 1</a></li>
      </ul>
  </nav>
</div>
<div class="box-lid">
  <div class="box-lid-content">
    <div class="wrapper">
      <article id="chap1">
        <h2>Chapter 1</h2>
      </article>
    </div>
  </div>
</div>

JavaScriptの指定

Box Lid Menuのロードを行うJavaScriptを追加します。

<script>
  $(function() {
    $('.box-lid-menu').boxLid();
  });
</script>

053.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>053</title>

    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="box-lid/css/box-lid.css" rel="stylesheet">
    <link href="box-lid/css/box-lid-nav.css" rel="stylesheet">

    <style>
      .wrapper {
        width: 960px;
        margin: 0 auto;
        padding-top: 60px;
      }
      article { padding: 5px 15px; }
      #chap1 { height:300px; background: #a5a5a5; }
      #chap2 { height:400px; background: #d2bf79; }
      #chap3 { height:500px; background: #727b69; }
      ul { list-style-type: none; }
    </style>
  </head>

  <body>
    <div class="box-lid-menu">
      <div class="box-lid-icon"></div>
      <nav>
        <h6>Table of Contents</h6>
          <ul>
            <li><a href="#chap1">Chapter 1</a></li>
            <li><a href="#chap2">Chapter 2</a></li>
            <li><a href="#chap3">Chapter 3</a></li>
          </ul>
      </nav>
    </div>
    <div class="box-lid">
      <div class="box-lid-content">
        <div class="wrapper">
          <article id="chap1">
            <h2>Chapter 1</h2>
          </article>
          <article id="chap2">
            <h2>Chapter 2</h2>
          </article>
          <article id="chap3">
            <h2>Chapter 3</h2>
          </article>
        </div>
      </div>
    </div>

    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="box-lid/js/jquery.box-lid.min.js"></script>
    <script>
      $(function() {
        $('.box-lid-menu').boxLid();
      });
    </script>
  </body>
</html>

デモは、053.htmlからご覧頂けます。

ファイルは、053.zipからダウンロードできます。