問題
14
HTML/CSS
ハンバーガーメニューのアイコン実装
Webサイトでよく見られるハンバーガーメニューのアイコンを作成します。 ハンバーガーメニューとは、Webアプリなどでよく見られる画面右上にある三本線のアイコンのことです。
HTML/CSSの問題に挑戦しよう！
問題
「ハンバーガーメニューのアイコン実装」
ハンバーガーメニューの開閉スイッチに使用するアイコンを実装していきましょう!
クリックしたら3本線から×印にちょっとしたアニメーションを施しましょう。
見本動画を参考にして実装してください。
期待する画面
解答と解説（ハンバーガーメニューのアイコン実装）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
input,labelでクリックした時の挙動を分けます。
デフォルトの3本線は、iタグで線で実装します。
iタグの値は:nth-child(n)で1~3まで別々にして表現
×印の表現は初級参拾弐を見本にして実装しましょう!
補足
チェックボックスをうまく活用することで今回のようにハンバーガーメニューアイコンを作成することができます。
三本線を2本線の×印に変化させるには、1本の線を消す必要があります。
今回は2番目の要素にtransform: rotateX(90deg);を付与することで、X軸で回転させ要素が見えない状態にしています。(実在はしている)
更に手を加えることでハンバーガーアイコンをクリックしたときにメニューを表示させることもできますので、是非一度作りきってみましょう!
