はじめに
一例としてメニューアイコンのようなものをScssで表現してみたいと思います。
Scssの導入方法については、ここでは詳しくのせていません！
予めご了承ください！
こちら完成画像です！
https://gyazo.com/694ce31aaf463856881d0ec73b78c206
今回はアプリに導入する前に部品を作る感じでやっていきます。
さっそく始めます！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="mobile-menu-icon"
onclick="document.querySelector('body').classList.toggle('menu-open');">
<span></span>
<span></span>
<span></span>
</button>
</body>
</html>
このspanを３つ配置しているのはハンバーバーメニューの三本線を表現しています。
onclick="document.querySelector('body').classList.toggle('menu-open');"でクリックした時の動作をonclickイベントで簡単に付与しました。
querySelector('body').classListでクラスの一覧を取得してtoggle('menu-open');でbody要素をつけたり消したりできるようにします。
これでクリックしたときに開閉ができるようになりました。
$cBlack: black;
$cWhite: white;
.mobile-menu-icon {
background-color: unset;
border: none;
outline: none !important;
cursor: pointer;
& > span {
background-color: $cBlack;
width: 35px;
height: 2px;
display: block;
margin-bottom: 9px;
transition: transform 0.7s;
&:last-child {
margin-bottom: 0;
}
}
}
.menu-open {
background-color: $cBlack;
& .mobile-menu-icon {
& > span {
background-color: $cWhite;
&:nth-child(1) {
transition-delay: 70ms;
transform: translateY(11px) rotate(135deg);
}
&:nth-child(2) {
transition-delay: 0s;
transform: translateX(-18px) scaleX(0);
}
&:nth-child(3) {
transition-delay: 140ms;
transform: translateY(-11px) rotate(-135deg);
}
}
}
}
・border: none;でボーダーのスタイルをなくしてしまいましょう。
・& > spanで.mobile-menu-iconの中のspan要素という意味です。
・background-color: $cWhite;でメニューをクリックしたときに背景が黒になるようにスタイルを適用してあげます。
・spanはインライン要素なのでwidthとheightを適用させるためには、display: block;
としてあげる必要があります！
・ハンバーガーメニューの一本一本に間隔をあけたいので、margin-bottom: 9px;として余白をあけてあげます！
・transition: transform 0.7s;。0.7秒でプロパティを変化させる記述です。
・&:last-childは、.mobile-menu-iconの中の３つ目のspan要素(最後の子要素)を指します。三本目のspan要素の下には余白はいらないので、margin-bottom: 0;として、余分な余白を消してあげます。
・& .mobile-menu-icon { }でメニューをクリックしたときのCSSを記述していきます！
・クリックしたときに、メニューが背景に混ざって見えなくなってしまわないように、background-color: $cWhite;でクリックしたときのメニューを白くしてあげています。
・&:nth-child(1)はメニューの一番上の棒の部分です。transformプロパティを用いて表現していきます。translateY(11px) で１１px下がったところを軸に、rotate(135deg)で時計回りで１３５度回転させてあげます。
・&:nth-child(3)も同様にtranslateY(-11px)で１１px上がったところを軸に rotate(-135deg)で反時計回りで１３５度回転させてあげます。
・&:nth-child(2) 二番目の棒は左方向にハケていきたいので、translateX(-18px) でX軸方向に丁度半分ずれるように-１８pxとしてあげて、scaleX(0)で要素を縮小して消すことを意味しています。
・ransition-delayは、アニメーションを開始するタイミングをずらすことができます。なくても良いのですが付け加えることによって、より複雑にアニメーションできます。
・最後にメニューをホバーしたときに、青色の枠線(outline)が見えてしまっているのですがoutline: none !important;で優先度をあげて消してあげました。
・cursor: pointer;でマウスをホバーしたタイミングでポインターにしてあげて完成です。
おわりに
これで一番目と三番目を回転させて、二番目を消してあげることでバッテンを表現できました。
詳しく書いたつもりですが、見づらかったらすいません！