ぷにおちゃん～クリックでポップアップメニューを表示できるSQUARE MENUを試してみる

はじめに

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

前提条件

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

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

Sidrの使用方法

環境設定

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

$ 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

CSSファイルの指定

square_menu.cssを指定します。

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

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

コンテンツの作成

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

クラス	概要
sidemenu	SQUARE MENUに表示するコンテンツ定義します。
left	SQUARE MENUの左側に表示する見出しを定義します。
right	SQUARE 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 -->

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

Table of Contents

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

はじめに

前提条件

Sidrの使用方法