★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）

HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に

[musabetu-poipoi]

今まで何故か動作しなかったのですが、動きました！ 突破口をありがとうございます！カスタマイズしていけそうです…！

[sainoue]

“header { padding:10px; background: skyblue; } #nav-drawer { position: relative; } /*チェックボックス等は非表示に*/ .nav-unshown { display:none; } /*アイコンのスペース*/ #nav-open { display: inline-block; width: 30px; height: 22px; vertical-align: middle; } /*ハンバーガ

[perl48]

とりま仮のレスポンシブページを作るときに使わせてもらいました。シンプルで楽でした。ありがとうございます。

[chienavi]

CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）｜サルワカ

[tsukuruiroiro]

セル熊