どうも7noteです。本日作るメニューはハンバーガーです。
完成予定図
![hamburger.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fe928bd4d-689d-032d-fb63-f8d7a7de4ae6.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4f3baaf19f3ae2aa915b5c5ca74aff6d)
では、まずは一般的なハンバーガーメニューの作り方から。
一般的なハンバーガーメニューの作り方
![normal.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fa2249939-32bb-90f1-c647-681b0a3c345a.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f5b7956a6f0ac2d18ded9646ed0c17e6)
index.html
<div class="menu">
<input type="checkbox" id="check" class="hidden" >
<label for="check" class="open"><span></span></label>
</div>
style.css
.hidden {
display: none;
}
.open {
width: 25px;
height: 25px;
display: block;
position: relative;
cursor: pointer;
}
.open span,
.open span:before,
.open span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background: #333;
transition: 0.5s;
position: absolute;
}
.open span:before {
bottom: 8px;
}
.open span:after {
top: 8px;
}
#check:checked ~ .open span {
background: rgba(255, 255, 255, 0);
}
#check:checked ~ .open span::before {
bottom: 0;
transform: rotate(45deg);
}
#check:checked ~ .open span::after {
top: 0;
transform: rotate(-45deg);
}
今回のメインはハンバーガー作りなので解説は省略します。
本物のハンバーガー メニュー
![hamburger.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fe928bd4d-689d-032d-fb63-f8d7a7de4ae6.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4f3baaf19f3ae2aa915b5c5ca74aff6d)
index.html
<div class="drawer">
<input type="checkbox" id="check" class="hidden" >
<label for="check" class="open">
<span class="ue"></span>
<span class="retas"></span>
<span class="tomato"></span>
<span class="meat"></span>
<span class="retas"></span>
<span class="shita"></span>
</label>
</div>
style.css
.hidden {
display: none;
}
.open {
width: 25px;
display: block;
margin: 20px;
position: relative;
cursor: pointer;
}
.open span {
content: '';
display: block;
width: 25px;
background: #333;
transition: 0.5s;
}
.open .ue {
background: #E4AE54;
border-radius: 10px 10px 0 0;
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: 0 0 2px 2px;
height: 3px;
}
#check:checked ~ .open span: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;
}
おそまつ!
参考・アイデア元
・CSSだけで作るハンバーガメニュー
https://yuntu-tek.com/hamburger-menu/
・ロッテリア
https://www.lotteria.jp/sp/menu/category.php?c=burger