<div class="navbar__hamberger-icon">
<div class="navbar__hamberger-icon-icon1"></div>
<div class="navbar__hamberger-icon-icon1"></div>
<div class="navbar__hamberger-icon-icon1"></div>
</div>
htmlでは、
要素にclass名を付けるだけ
// ハンバーガーメニューのボタン(CSS)
&__hamberger-icon {
position: absolute;
top: 50%;
right: 5%;
transform: translate(-5%,-50%);
//ハンバーガーメニューのボタンを構成
&-icon1 {
width: 2rem;
height: .1rem;
background: #ffffff;
margin: 5px;
}
}
CSSでの要点
①ボタンの位置を調整する
②widthで棒線の長さ
③heightで棒線の高さ
④色、そして棒線の間の広さを決定する