WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

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

css3のUI疑似クラス「E:checked」を使うことでcssのみでクリックイベントの指定が可能になります。
UI疑似クラス「E:checked」はフォームの部品である「ラジオボタン」「チェックボックス」の2つで使用可能です。

さらに「~」や「+」などのセレクターを使う事でcssのみでハンバーガー部分のアニメーションなども制作が可能です。

「+」で同じ階層のすぐ後の要素にのみ適用
「~」で同じ階層の後ろに並ぶ要素に適用