suzuto前回の記事に引き続きハンバーガーボタンを押した時の動作を付け加えていくよ。
ティアラ少し難しそうだけど頑張ってみるわ。
こんにちは、suzutoです。記事をご覧いただきありがとうございます。
今回は前回の記事で作ったハンバーガーボタンにアニメーションやJavaScriptで押した時の動作を付け加えていきます。
完成形は以下のようになります。ハンバーガーボタンをクリックしてみてください。
See the Pen ハンバーガーボタン by スズキトシヤ (@agpslbps-the-styleful) on CodePen.
上記のような感じでボタンをクリックした時に線がクロスするような挙動にしました。
この記事を読むと、ハンバーガーボタンを押した時の動作を追加する方法がわかります。
最初は少し難しいかもしれませんが、覚えると簡単に実装できますのでぜひお試してみてください。
前回のハンバーガーボタンの見た目が完成した状態から始めていきますので、もし前回のハンバーガーボタンの見た目を完成させたい場合は以下の記事を参考にしてみてね。
それでは早速作っていきましょう！
【Webサイト制作】ハンバーガーボタンを押した時の動作の作り方
ボタンを押した時の動作はどうやって作るかというと、ボタンが押されるたびに「クラスを付与したり外したりしてボタンのスタイルを変化」させていきます。
【ボタンを押した時の動作イメージ】
ボタンを押す→クラスを付与する→もう一度ボタンを押す→クラスを外す→もう一度ボタンを押す→クラスを付与する→もう一度ボタンを押す→クラスを外す→・・・・・・
というわけで、実際に作っていきます。
CSSでボタンを押した時（クラスが付与された時）の動作を作る
最初にボタンを押した時に付与するクラスを決めます。今回はボタンを押した時に「is-active」というクラスが付与されるようにします。
まずは「is-active」が付与された時のスタイルをCSSで作りましょう！
前回作成したハンバーガーボタンのCSSの下に続けて以下を追加で記述していきます。
.is-active span:nth-child(1) {
transform: rotate(125deg);
top: 0;
}
.is-active span:nth-child(2) {
opacity: 0;
}
.is-active span:nth-child(3) {
top: 0;
transform: rotate(-125deg);
}「is-active」というクラスが付いた時のspanの1本目（ハンバーガーボタン3本線の一番上の線）のスタイルです。
.is-active span:nth-child(1) {
transform: rotate(125deg);
top: 0;
}
ハンバーガーボタン3本線の一番上の線を2番目の線に重ねて125度回転させます。
次に「is-active」というクラスが付いた時のspanの2本目（ハンバーガーボタン2本線の一番上の線）のスタイルです。
.is-active span:nth-child(2) {
opacity: 0;
}
ハンバーガーボタン3本線の真ん中は透明度を0にして消します。
最後にハンバーガーボタン3本線の一番下の線を2番目の線に重ねて-125度回転させます(1本目とは逆回転)。
.is-active span:nth-child(3) {
top: 0;
transform: rotate(-125deg);
}
一番下の線を2番目の線に重ねて-125度回転させます(1本目とは逆回転)。
これでCSSはOKです。
.burger {
width: 50px;
height: 50px;
border: 2px solid #000;
position: fixed;
top: 5%;
left: 5%;
cursor: pointer;
> span {
width: 80%;
height: 4px;
border-radius: 4px;
background-color: #000;
position: absolute;
inset: 0;
margin: auto;
transition: all 0.3s;
}
> span:nth-child(1) {
top: -40%;
}
> span:nth-child(3) {
top: 40%;
}
}
.is-active span:nth-child(1) {
transform: rotate(125deg);
top: 0;
}
.is-active span:nth-child(2) {
opacity: 0;
}
.is-active span:nth-child(3) {
top: 0;
transform: rotate(-125deg);
}JavaScriptでボタンを押した時にクラスをトグル（つけたり外したり）させる
次にJavaScriptでボタンを押した時にクラスをトグル（つけたり外したり）させるようにします。
HTMLのbodyタグの閉じタグの直前にscriptタグを作り、その中に書いていきます。
let btn = document.querySelector(".burger");
btn.onclick = () => {
btn.classList.toggle("is-active");
};
まずはハンバーガーボタンを取得し「btn」という変数に格納します。
let btn = document.querySelector(“.burger”);
取得した「btn」を押した時にクラスをトグルさせます。
btn.onclick = () => {
btn.classList.toggle(“is-active”);
};
以上でJavaScriptは完成です。
CSSアニメーションをつける
このままだと、ボタンを押した時にアニメーションしないので、最後にCSSでアニメーションをつけます。
変化元のspanに対してアニメーションを追加しましょう！
> span {
width: 80%;
height: 4px;
border-radius: 4px;
background-color: #000;
position: absolute;
inset: 0;
margin: auto;
transition: all 0.3s;
}spanに対して以下を追加することで0.3秒かけてハンバーガーボタンの線が変化するようになります！
transition: all 0.3s;
以上で完成です。お疲れ様でした。
【まとめ】ハンバーガーボタンを押した時の動作の作り方
完成した全体のコードです。
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>.burger {
width: 50px;
height: 50px;
border: 2px solid #000;
position: fixed;
top: 5%;
left: 5%;
cursor: pointer;
> span {
width: 80%;
height: 4px;
border-radius: 4px;
background-color: #000;
position: absolute;
inset: 0;
margin: auto;
transition: all 0.3s;
}
> span:nth-child(1) {
top: -40%;
}
> span:nth-child(3) {
top: 40%;
}
}
.is-active span:nth-child(1) {
transform: rotate(125deg);
top: 0;
}
.is-active span:nth-child(2) {
opacity: 0;
}
.is-active span:nth-child(3) {
top: 0;
transform: rotate(-125deg);
}let btn = document.querySelector(".burger");
btn.onclick = () => {
btn.classList.toggle("is-active");
};ポイントは、
- ボタンを押した時のハンバーガーボタンの線のスタイルをCSSでクラス名を決めて作る
- ボタンを押すたびクラスをつけたり外したり（トグル）させる
今回は線をクロスさせましたが、色々なバリエーションのボタンも作ることができます。
例えば、以下のようなまるでハンバーガーみたいなボタンも作れます。
See the Pen まるでハンバーガーなボタン by スズキトシヤ (@agpslbps-the-styleful) on CodePen.
作り方は意外とシンプルなのでぜひ色々試してみて自分オリジナルなバーガーボタンを作ってみてください。
