CSS>cssだけでレスポンシブなナビゲーションメニューを作る

cssだけでレスポンシブなナビゲーションメニューを作る

2018年6月27日

ソースコード

 

ヘッダーのメニューが横一列に並んでいて、画面幅が狭くなるとアイコンが出てきて、クリックするとメニューが表示されるという、スマホサイトではあるあるの仕組み。

だいたいが、jQueryのトグルクラスを使って実現しているのですが、今回はcssだけで作ってみました。

まだまだ改良の余地があるのですが、一応機能的には十分です。

 

デモ

 

 

メニューを作る

まずはナビゲーションメニューのhtmlを完成させます

 

 

 

このチェックボックスこそがトグルクラスと同じ役割を持つ機能になります。
次にcssのほうを書いていきます。

 

 

 

これで完成です。

 

デモページのようなレスポンシブメニューがCSSだけで作れました

 

ポイントは、cssの

 

 

input[type=”checkbox”]:checked + label a{ display: block; }

 

の部分ですね。

これはチェックボックスにチェックがある時のみ発動されます。

 

画面サイズが広い時はアイコンが非表示になり、狭い時に表示させています。