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

  • 6
    いいね
  • 0
    コメント

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

サイドバーメニューの動作例

サンプルの動作は デモ からご確認ください。

動くサイドバーメニュー

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

SemantiUIのサイドバー

サイドバーメニューのソース

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

<!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は3つのブロックから構成されます。

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

サイドバーメニューのHTML

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

サイドバーメニューのHTML
<div class="ui sidebar vertical menu">
  <!-- サイドバーの中身 -->
</div>

sidebarクラスを付与すると、visibility: hidden;がついてsidebarクラスに囲まれたコンテンツは表示されなくなります。

ナビゲーションメニューの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
<div class="pusher">
  <!-- コンテンツの中身 -->
</div>

pusherというクラスがあると、サイドバーメニューが開閉したときに中身が押されてスライドしてくれます。

CSSについて

SemanticUIのCSSを読み込みます。

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についてポイントは3つについてコメントします。

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

jQuery

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

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

SemanticUI JS

SemanticUIのJavaScriptを読み込みます。

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');を呼ぶようにします。

SemanticUIのJSを読み込み
<script>
  $('#js-sidebar').click(function() {
   $('.ui.sidebar').sidebar('toggle');
  });
</script>

SemantiUIのサイドバーサンプルそのままです。

感想

デモ を再掲します。動きはこちらをご確認ください。

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

参考

http://semantic-ui.com/modules/sidebar.html