はじめに
CSS3でよくみるレイアウトを作り、アウトプットしていく。
参考
ハンバーガーメニュー実装
1. 3本の線を作る
<button class="menu">
<span></span>
<span></span>
<span></span>
</button>
body {
.menu {
background-color: transparent;
border: none;
outline: none !important;
cursor: pointer;
& > span {
background-color: $cBlack;
width: 35px;
height: 2px;
display: block;
margin-bottom: 9px;
transition: transform 1s;
&:last-child {
margin-bottom: 0;
}
}
}
}
2. クリック後の挙動を追加
クリックした時、bodyに対してmunu-openクラスをtoggleで付与する。
const body = document.querySelector("body");
const menuClick = document.querySelector(".menu");
menuClick.addEventListener("click",()=>{
body.classList.toggle("menu-open");
})
3. クリック後のクラスを作り、子要素を書き換える
.menu-open {
background-color: black;
.menu {
& > span {
background-color: white;
&:nth-child(1) {
transform: translateY(11px) rotate(135deg);
}
&:nth-child(2) {
transform: translateX(-10px) scaleX(0);
}
&:nth-child(3) {
transform: translateY(-11px) rotate(-135deg);
}
}
}
}
[説明]
子要素のmenuクラスには何もせず、spanのcolorをwhiteにし、span2をscaleで消し、
span1とspan3をそれぞれtranslateでY軸方向(真ん中に寄るように)に移動させます。
同時にrotateで傾きを設定し、バツを作ります。
完成品
※ transitionを追加
See the Pen
by kyo212 (@kyo212)
on CodePen.
補足
menuに対して
outline: none !important; // 青い枠線を消す
cursol: pointer;
とつけるとなおよし。
※ !important 優先順位を上げる
codepen でのSassの書き方でエラーをいっぱい出したので共有する。
codepenでSassを扱う場合、中括弧とセミコロンは必要ない
インデントを綺麗に揃える必要がある
プロパティのコロンの直後にスペースを入れる
↧