SemanticUIのサイドバーメニュー格好いいですね(☝ ՞ਊ ՞)
サイドバーメニューの動作例
サンプルの動作は デモ からご確認ください。
動くサイドバーメニュー
ボタンを押してトグルで開閉動作するサイドバーメニューを作るニーズは多いと思います。以下のスクリーンショットのような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は３つのブロックから構成されます。
- サイドバーメニュー
- ナビゲーションメニュー
- メインコンテンツ
サイドバーメニューのHTML
sidebarというクラスに囲まれたブロックが表示されるサイドバーになります。
<div class="ui sidebar vertical menu">
<!-- サイドバーの中身 -->
</div>
sidebarクラスを付与すると、visibility: hidden;がついてsidebarクラスに囲まれたコンテンツは表示されなくなります。
ナビゲーションメニューの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というクラスを付与しています。
<div class="pusher">
<!-- コンテンツの中身 -->
</div>
pusherというクラスがあると、サイドバーメニューが開閉したときに中身が押されてスライドしてくれます。
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についてポイントは３つについてコメントします。
- jQuery
- SemantiUI-JS
- sidebar('toggle')
jQuery
jQueryを読み込みます。SemanticUIのJSはjQueryが必要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
SemanticUI JS
SemanticUIのJavaScriptを読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
sidebar('toggle')
#js-sidebarをタップしたときにclickイベントが呼ばれるようにして、sidebar('toggle');を呼ぶようにします。
<script>
$('#js-sidebar').click(function() {
$('.ui.sidebar').sidebar('toggle');
});
</script>
SemantiUIのサイドバーサンプルそのままです。
感想
デモ を再掲します。動きはこちらをご確認ください。
SemanticUIのカッコいいサイドバーサンプルが表示できました。やったね(☝ ՞ਊ ՞)
参考