More than 5 years have passed since last update.

ハンバーガーメニューの作り方

Posted at 2020-05-13

    <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で棒線の高さ
④色、そして棒線の間の広さを決定する

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up