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

2014年04月06日 12時26分

201404061226HCSW00.png

はじめに

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

前提条件

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

ソフトウエアバージョン
OSWindows 7 Ultimate 32bit
CygwinSetup Version 2.831

Box Lid Menuの使用方法

  1. 環境設定

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

    $ 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
    
  2. 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">
    
  3. jsファイルの指定

    jquery.box-lid.jsを指定します。 追加します。

    <script src="box-lid/js/jquery.box-lid.min.js"></script>
    
  4. コンテンツの作成

    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>
    
  5. 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からダウンロードできます。