toggle
2018-11-20

CSSだけで作るドロワーメニュー

ドロワーメニューとは
パソコンの時は普通に見えてるけど
スマホになったら「≡」になるやつ。

CSSだけでつくってみよう、ということで
↓コードは以下のリンクを見てください
↓ページを縮めると、普通のメニュが「≡」になります。
↓(別タブで開きます)
↓(メニュー タイプ1~5はリンクしています)

● CSSだけで切り替えるメニュー タイプ1

● CSSだけで切り替えるメニュー タイプ2

● CSSだけで切り替えるメニュー タイプ3

● CSSだけで切り替えるメニュー タイプ4

● CSSだけで切り替えるメニュー タイプ5

タイプ1~3は「≡」のまま。メニューの現れ方が違う。
タイプ4と5はパソコン上では「≡」から「×」になるんだけど
iPhone8で見たら「≡」のままだったので
CSSが対応していないのかも?(^^;)

コードを参考に、自分でアレンジしてみましょう☆

関連記事