どうも7noteです。本日作る料理はハンバーガーです。
まずは一般的なハンバーガーメニューの作り方から。
一般的なハンバーガーメニューの作り方
index.html
<divclass="menu"><inputtype="checkbox"id="check"class="hidden"><labelfor="check"class="open"><span></span></label></div>style.css
.hidden{display:none;}.open{width:25px;height:25px;display:block;position:relative;cursor:pointer;}.openspan,.openspan:before,.openspan:after{content:'';display:block;height:3px;width:25px;border-radius:3px;background:#333;transition:0.5s;position:absolute;}.openspan:before{bottom:8px;}.openspan:after{top:8px;}#check:checked~.openspan{background:rgba(255,255,255,0);}#check:checked~.openspan::before{bottom:0;transform:rotate(45deg);}#check:checked~.openspan::after{top:0;transform:rotate(-45deg);}今回のメインはハンバーガー作りなので解説は省略します。
本物のハンバーガー メニュー
index.html
<divclass="drawer"><inputtype="checkbox"id="check"class="hidden"><labelfor="check"class="open"><spanclass="ue"></span><spanclass="retas"></span><spanclass="tomato"></span><spanclass="meat"></span><spanclass="retas"></span><spanclass="shita"></span></label></div>style.css
.hidden{display:none;}.open{width:25px;display:block;margin:20px;position:relative;cursor:pointer;}.openspan{content:'';display:block;width:25px;background:#333;transition:0.5s;}.open.ue{background:#E4AE54;border-radius:10px10px00;height:5px;}.open.retas{background:#98E357;height:2px;}.open.tomato{background:#E34F50;height:2px;}.open.meat{background:#975637;height:2px;}.open.shita{background:#E4AE54;border-radius:002px2px;height:3px;}#check:checked~.openspan:not(.meat):not(.tomato){background:rgba(255,255,255,0);}#check:checked~.open.tomato{position:absolute;bottom:5px;transform:rotate(45deg);background:#333;}#check:checked~.open.meat{position:absolute;top:5px;transform:rotate(-45deg);background:#333;}おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
参考・アイデア元
・CSSだけで作るハンバーガメニュー
https://yuntu-tek.com/hamburger-menu/
・ロッテリア
https://www.lotteria.jp/sp/menu/category.php?c=burger