[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック
Post on:2017年3月8日
sponsors
レスポンシブ対応、アイコンをクリック・タップすると、サイドバーをアニメーションでスライド表示・非表示させるCSSのテクニックを紹介します。
スライドは単にそう見えるだけで、transformでサイドバーを変形させています。
滑らかなアニメーション、美しいグラデーション、スライドするにつれて透明度が変化するのも美しいですね。
サイドバーをアニメーションでスライドさせるデモ
実際の動作は、デモでお楽しみください。
デスクトップサイズでも、スマホサイズでも期待通り。動作します。
※CSS変数で実装されているため、IEでは動作しません。
See the Pen CSS sidebar toggle by CiTA (@CiTA) on CodePen.
実装
実装の仕組み
アイコンはフォームのチェックボックスで実装されており、そのオン・オフをトグルにしてサイドバーを表示しています。
トグルの切り替え時のみJavaScriptが使用されており、それ以外はアニメーションも含めてHTMLとCSSで実装されています。
Step 1: HTML
HTMLの構造はアイコン、ナビゲーション、コンテンツで、非常にシンプルです。それぞれ自由に配置できます。
|
1 2 3 4 5 6 7 8 9 10 |
<input type="checkbox" id="menuToggler" class="input-toggler"/> <label for="menuToggler" class="menu-toggler"> <!-- アイコン --> </label> <nav class="sidebar"> <!-- ナビゲーション --> </nav> <main class="content"> <!-- コンテンツ --> </main> |
Step 2: CSS
サイドバーは、transformプロパティで変形させて表示しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
:root { --sidebar-width: 100%; } .sidebar { width: var(--sidebar-width); -webkit-transform: translateX(calc(var(--sidebar-width) * -1)); transform: translateX(calc(var(--sidebar-width) * -1)); background: -webkit-linear-gradient(top left, Tomato, Wheat); background: linear-gradient(to bottom right, Tomato, Wheat); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; height: 100vh; opacity: .5; } .input-toggler { position: absolute; left: -100%; } .input-toggler:checked ~ .sidebar { -webkit-transform: translateX(0); transform: translateX(0); opacity: .98; } |
※「--sidebar-width」はネイティブのCSS変数で、IEを除く、すべてのモダンブラウザにサポートされています。
参考: プロパティを変数で指定 -コリス
sponsors
