Semantic UIのサイドバーメニューサンプルを表示しました

SemanticUIのサイドバーメニュー格好いいですね(☝ ՞ਊ ՞)

# サイドバーメニューの動作例
サンプルの動作は [デモ](https://rawgit.com/pugiemonn/14045f7a8a0f4181c7e671c1ec89227f/raw/225ad8b9cab5140d6a0c13f230a3c5d72b687034/semantic-ui-sidebar.html) からご確認ください。

# 動くサイドバーメニュー
ボタンを押してトグルで開閉動作するサイドバーメニューを作るニーズは多いと思います。以下のスクリーンショットのようなSemantiUIのサイドバーサンプルを表示しました。

<img width="390" alt="SemantiUIのサイドバー" src="https://qiita-image-store.s3.amazonaws.com/0/1624/7e675d44-719f-60da-3eda-dae134ae6960.png">

# サイドバーメニューのソース
以下がサイドバーメニューのサンプルソースです。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <style>
      .pusher {
          padding-top:80px;
      }
    </style>
    <!-- semantic.css 読み込み --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" integrity="sha256-iK7AZM7Xa42iuURdMdo1sp38ld/JJ3fDtS0523GKqdk=" crossorigin="anonymous" />
  </head>
  <body>
    <!-- サイドバーメニュー -->
    <div class="ui sidebar inverted vertical menu">
      <a class="item">
        1
      </a>
      <a class="item">
        2
      </a>
      <a class="item">
        3
      </a>
    </div>

    <!-- 上部ナビゲーションメニュー -->
    <div class="ui fixed menu">
      <div class="menu">
        <div id="js-sidebar" class="item"><i class="icon large grey content"></i></div>
      </div>
    </div>

    <!-- コンテンツ本体 -->
    <div class="pusher">
      <h1>見出し</h1>
    </div>

    <!-- jQuery 読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- semantic.js 読み込み --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js" integrity="sha256-HcON65l89nxNl7vaRECVPe/zNDBzhCcJYBE7O+EcruU=" crossorigin="anonymous"></script>
    <!-- サイドバーの開閉処理 -->
    <script>
      $('#js-sidebar').click(function() {
        $('.ui.sidebar').sidebar('toggle');
      });
    </script>
  </body>
</html>
```
上記ソースのHTML、CSS、JavaScriptについてポイントを簡単にまとめます。

## HTMLについて
HTMLは３つのブロックから構成されます。

+ サイドバーメニュー
+ ナビゲーションメニュー
+ メインコンテンツ

### サイドバーメニューのHTML
`sidebar`というクラスに囲まれたブロックが表示されるサイドバーになります。

```html:サイドバーメニューのHTML
<div class="ui sidebar vertical menu">
  <!-- サイドバーの中身 -->
</div>
```
`sidebar`クラスを付与すると、`visibility: hidden;`がついて`sidebar`クラスに囲まれたコンテンツは表示されなくなります。

### ナビゲーションメニューのHTML
ナビゲーションメニューを追加しています。ナビゲーションのメニューにはサイドバーメニューを開閉するためのアイコンを設置します。

```html:ナビゲーションメニューのHTML
<div class="ui fixed menu">
 <div class="menu">
   <div id="js-sidebar" class="item"><i class="icon large grey content"></i></div>
 </div>
</div>
```
ここでアイコンに`js-sidebar`というidを付与してJSから呼び出しに備えています。

### メインコンテンツのHTML
メインコンテンツ配置用のボックスを用意します。`pusher`というクラスを付与しています。

```html:サイドバーメニューのHTML
<div class="pusher">
  <!-- コンテンツの中身 -->
</div>
```
`pusher`というクラスがあると、サイドバーメニューが開閉したときに中身が押されてスライドしてくれます。

## CSSについて
SemanticUIのCSSを読み込みます。

```html:SemanticUIのCSSを読み込み
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" />
```
SemanticUIのCSS本体です。

## JavaScriptについて
SemanticUIのJavaScriptについてポイントは３つについてコメントします。

+ jQuery
+ SemantiUI-JS
+ sidebar('toggle')

### jQuery
jQueryを読み込みます。SemanticUIのJSはjQueryが必要です。

```html:jQueryを読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
```

### SemanticUI JS
SemanticUIのJavaScriptを読み込みます。

```html:SemanticUIのJSを読み込み
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
```
### sidebar('toggle')
`#js-sidebar`をタップしたときにclickイベントが呼ばれるようにして、`sidebar('toggle');`を呼ぶようにします。

```html:SemanticUIのJSを読み込み
<script>
  $('#js-sidebar').click(function() {
   $('.ui.sidebar').sidebar('toggle');
  });
</script>
```
SemantiUIのサイドバーサンプルそのままです。

# 感想
[デモ](https://rawgit.com/pugiemonn/14045f7a8a0f4181c7e671c1ec89227f/raw/225ad8b9cab5140d6a0c13f230a3c5d72b687034/semantic-ui-sidebar.html) を再掲します。動きはこちらをご確認ください。

SemanticUIのカッコいいサイドバーサンプルが表示できました。やったね(☝ ՞ਊ ՞)

# 参考
http://semantic-ui.com/modules/sidebar.html