ぷにおちゃん～サイドメニューをトグル表示できるSidrを試してみる

はじめに

Sidrは、サイドメニューの表示、非表示をクリックで切り替えることができるJQueryプラグインです。

前提条件

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

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

Sidrの使用方法

環境設定

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

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

CSSファイルの指定
jquery.sidr.dark.cssまたは、jquery.sidr.light.cssを指定します。
```
<link href="sidr/dist/stylesheets/jquery.sidr.dark.css" rel="stylesheet">
```
jsファイルの指定
jquery.sidr.jsを指定します。追加します。
```
<script src="sidr/dist/jquery.sidr.js"></script>
```

コンテンツの作成

Sidrでは、下記のidセレクタを使用してコンテンツを作成します。

セレクタ	概要
sidr	サイドバーに表示する見出しを定義します。
a	サイドバーの見出しに対応するリンクを定義します。

<div id="sidr">
  <ul>
    <li><a href="#chap1">Chapter 1</a></li>
    <li><a href="#chap2">Chapter 2</a></li>
  </ul>
<a id="simple-menu" href="#sidr">
  <span class="label label-success">MENU</span>
</a>
<article id="chap1"><h4>Chapter 1</h4></article>
<article id="chap2"><h4>Chapter 2</h4></article>

JavaScriptの指定

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

<script>
  $(function() {
    $('#simple-menu').sidr();
  });
</script>

054.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>054</title>

    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="sidr/dist/stylesheets/jquery.sidr.dark.css" rel="stylesheet">

    <style>
      body { background: #333333; 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; }
    </style>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3" id="side">
          <div id="sidr">
            <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>
              <li><a href="#chap4">Chapter 4</a></li>
              <li><a href="#chap5">Chapter 5</a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-9" id="main">
          <a id="simple-menu" href="#sidr">
            <span class="label label-success">MENU</span>
          </a>
          <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>
        </div>
      </div>
    </div>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="sidr/dist/jquery.sidr.js"></script>
    <script>
      $(function() {
        $('#simple-menu').sidr();
      });
    </script>
  </body>
</html>

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

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

Table of Contents

サイドメニューをトグル表示できるSidrを試してみる

はじめに

前提条件

Sidrの使用方法