[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック

レスポンシブ対応、アイコンをクリック・タップすると、サイドバーをアニメーションでスライド表示・非表示させるCSSのテクニックを紹介します。

スライドは単にそう見えるだけで、transformでサイドバーを変形させています。

デモのキャプチャデモのアニメーション

滑らかなアニメーション、美しいグラデーション、スライドするにつれて透明度が変化するのも美しいですね。


サイドバーをアニメーションでスライドさせるデモ

実際の動作は、デモでお楽しみください。
デスクトップサイズでも、スマホサイズでも期待通り。動作します。
※CSS変数で実装されているため、IEでは動作しません。

See the Pen CSS sidebar toggle by CiTA (@CiTA) on CodePen.

実装

実装の仕組み

アイコンはフォームのチェックボックスで実装されており、そのオン・オフをトグルにしてサイドバーを表示しています。
トグルの切り替え時のみJavaScriptが使用されており、それ以外はアニメーションも含めてHTMLとCSSで実装されています。

Step 1: HTML

HTMLの構造はアイコン、ナビゲーション、コンテンツで、非常にシンプルです。それぞれ自由に配置できます。

Step 2: CSS

サイドバーは、transformプロパティで変形させて表示しています。

※「--sidebar-width」はネイティブのCSS変数で、IEを除く、すべてのモダンブラウザにサポートされています。
参考: プロパティを変数で指定 -コリス

top of page

©2017 coliss