クリックでポップアップメニューを表示できるSQUARE MENUを試してみる

2014年04月13日 21時47分

201404132147HCSW00.png

はじめに

SQUARE MENUは、サイドに表示されたメニューボタンをクリックすると、平面上のナビゲーションメニューが表示できるJQueryプラグインです。

前提条件

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

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

Sidrの使用方法

  1. 環境設定

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

    $ cd /tmp/demo
$ wget -q https://github.com/peachananr/square_menu/archive/master.zip
$ unzip -q master.zip
$ rm -f master.zip
$ mv square_menu-master square_menu
  2. CSSファイルの指定

    square_menu.cssを指定します。 

    <link href="square_menu/square_menu.css" rel="stylesheet">
  3. jsファイルの指定

    jquery.square_menu.min.jsを指定します。 

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

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

    クラス概要
    sidemenuSQUARE MENUに表示するコンテンツ定義します。
    leftSQUARE MENUの左側に表示する見出しを定義します。
    rightSQUARE MENUの右側に表示する見出しを定義します。
     
    <div class="sidemenu">
  <nav class="left">
    <a href="#"></a>
    <a href="#"></a>
  </nav>
  <nav class="right">
    <a href="#"></a>
    <a href="#"></a>
  </nav>
</div><!-- sidemenu -->
  5. JavaScriptの指定

    SQUARE MENUのロードを行うJavaScriptを追加します。 

    <script>
  $(function() {
    $(".sidemenu").square_menu();
  });
</script>
    055.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>055</title>

    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="square_menu/square_menu.css" rel="stylesheet">

    <style>
      body { background: #888; margin-top: 10px; }
      article { height:300px; margin-top:20px; padding: 10px; }
      #chap1 { background: #b2b2b2; }
      #chap2 { background: #ddded3; }
      #chap3 { background: #d1b6b0; }
      #chap4 { background: #fadebc; }
      #chap5 { background: #9fc5ba; }
      #chap6 { background: #bb9875; }
      .sidemenu { text-align: center; }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <div class="sidemenu">
            <nav class="left">
              <a href="#chap1" onclick="$('.sidemenu').closeMenu()">Chapter 1</a>
              <a href="#chap2" onclick="$('.sidemenu').closeMenu()">Chapter 2</a>
              <a href="#chap3" onclick="$('.sidemenu').closeMenu()">Chapter 3</a>
            </nav>
            <nav class="right">
              <a href="#chap4" onclick="$('.sidemenu').closeMenu()">Chapter 4</a>
              <a href="#chap5" onclick="$('.sidemenu').closeMenu()">Chapter 5</a>
              <a href="#chap6" onclick="$('.sidemenu').closeMenu()">Chapter 6</a>
            </nav>
          </div><!-- sidemenu -->
          <article id="chap1"><h4>Chapter 1</h4></article>
          <article id="chap2"><h4>Chapter 2</h4></article>
          <article id="chap3"><h4>Chapter 3</h4></article>
          <article id="chap4"><h4>Chapter 4</h4></article>
          <article id="chap5"><h4>Chapter 5</h4></article>
          <article id="chap6"><h4>Chapter 6</h4></article>
        </div><!-- col -->
        <div class="col-md-3"></div>
      </div><!-- row -->
    </div><!-- container -->

    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="square_menu/jquery.square_menu.min.js"></script>
    <script>
      $(function() {
        $(".sidemenu").square_menu();
      });
    </script>
  </body>
</html>
    デモは、055.htmlからご覧頂けます。
    ファイルは、055.zipからダウンロードできます。

▲