KYO

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

2018年6月27日 CSS ,

ソースコード

 

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

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

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

 

デモ

 

 

メニューを作る

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

 

 

 

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

 

 

 

これで完成です。

 

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

 

ポイントは、cssの

 

 

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

 

の部分ですね。

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

 

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


関連記事

高さの違う画像を揃えてレスポンシブに横並び表示する

2018年8月20日

今回は高さの違う画像を横並びで表示した時に高さを揃えて表示させます。 さらにレスポンシブに表示させます。 高さを具体的な固定値で指定せずに%で指定することで、凝り固まったデザインでないレスポンシブなデザインになります。 イメージとしてはこんな感じです。画像の元のサイズはそれぞれ高さも幅も違いますが、きっちり揃えて表示できています。 [ca...

パーツを組み合わせてレスポンシブなサイトを作った

2018年7月28日

過去の3つの記事で、記事一覧部分のデザイン、ヘッダーメニュー部分のデザイン、なんかスライダー部分のデザインを作りました。 これらの3つの記事の応用で一つのレスポンシブなサイトを作ってみました Bootstrapとフレックスボックスで記事一覧部分のデザインを作る 記事やコンテンツが流れていくスライダーのアレを作ってみた オーバーレイをかけた...

ERROR: Could not find a valid gem ‘sass’でsassがインストールできない

2018年8月2日

Mac環境で sudo gem install sass ERROR: Could not find a valid gem 'sass' (>= 0), here is why: みたいなエラー起きた とりあえずググる Error: SASS installation for windows 英語でよくわからんが gem sour...

Bootstrapとフレックスボックスで記事一覧部分のデザインを作る

2018年7月28日

ワードプレスのテーマを自作している時に、トップページに新着記事一覧を表示することが多いのですが、その記事一覧部分のデザインは非常に重要ですね。どんな記事なのか知る前に、視覚的に見やすいか見やすくないかという情報が入ってきてしまうので考えて作るべきです。 記事一覧部分を作る まずはBootstrapを使って作るパターンと、Bootstrap...

cssデザインメモ。自分の勉強用

2018年8月27日

cssでちょっとしたデザインをメモしていきます。背景画像系はまだまだ面白く操作できそうだ。 ボックスの左上と右下にアイコン画像を設置して、引用文などに使えるデザイン .box{ padding:30px 60px; margin:100px 100px; color:#333; text-align: center; display: i...