プログラミング学習
当サイト使用テーマ・サーバー
＼ SWELL【WordPressテーマ】 ／
＼ レンタルサーバー【ConoHa WING】 ／
美容・脱毛
ホームページ制作
【JavaScript】ハンバーガーメニュー動き3種
この記事では、ハンバーガーメニューをクリックしたときの動きを３種類紹介していきます。
目次
完成形
まずは完成形を見ていきましょう。
上から３種類のハンバーガーメニューがあると思います。
それぞれクリック又は画面をタップしてハンバーガーメニューの動きを確認しましょう。
See the Pen js-09 by aqua (@aqua-programdiary) on CodePen.
HTMLコーディング
最初にHTMLのコーディングをしていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<script src="main.js"></script>
</body>
</html>
各 <div class="hamburger"> 要素内には <span> 要素が3つ含まれており、これらの <span> 要素がハンバーガーアイコンの横棒を表現しています。ハンバーガーアイコンは通常、メニューの展開・折り畳みを行うためのアイコンとして使われます。
CSSスタイルを適用してハンバーガーアイコンを見栄え良くすることができます。JavaScriptを使用して、ハンバーガーアイコンがクリックされた際のメニューの表示・非表示などの動作を実装することも可能です。
CSSコーディング
次にCSSのコーディングでハンバーガーメニューのスタイルを設定していきます。
@charset 'utf-8';
/* 共通設定 */
.hamburger {
width: 100px;
height: 100px;
cursor: pointer;
transition: all 0.3s;
position: relative;
margin: 0 auto;
}
.hamburger span {
width: 50px;
height: 2px ;
background: #333;
position: absolute;
left: 25px;
transition: all 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 36px;
}
.hamburger span:nth-child(2) {
top: 50px;
}
.hamburger span:nth-child(3) {
top: 64px;
}
/* 1番目 */
.hamburger.active span:nth-child(1) {
top: 47px;
left: 25px;
background :#333;
transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 47px;
background: #333;
transform: rotate(45deg);
}
/* 2番目 */
.hamburger.opacity span:nth-child(1) {
top: 47px;
left: 25px;
background :#333;
transform: rotate(-45deg);
}
.hamburger.opacity span:nth-child(2) {
opacity: 0;
}
.hamburger.opacity span:nth-child(3) {
top: 47px;
background: #333;
transform: rotate(45deg);
}
/* 3番目 */
.hamburger.rotate span:nth-child(1) {
top: 47px;
left: 25px;
background :#333;
transform: rotate(-405deg);
}
.hamburger.rotate span:nth-child(2) {
opacity: 0;
}
.hamburger.rotate span:nth-child(3) {
top: 47px;
background: #333;
transform: rotate(405deg);
}
- 1番目のアニメーション (
hamburger.active):- クリックされた際にハンバーガーアイコンが “×” の形に変化するアニメーションです。1つ目の横棒が左上に傾斜し、2つ目と3つ目の横棒が右上に傾斜します。
- 2番目のアニメーション (
hamburger.opacity):- クリックされた際にハンバーガーアイコンがフェードアウトするアニメーションです。2つ目の横棒が透明になり、他の2つの横棒が角度を変えて回転します。
- 3番目のアニメーション (
hamburger.rotate):- クリックされた際にハンバーガーアイコンが回転するアニメーションです。1つ目の横棒が左に回転し、2つ目の横棒が消え、3つ目の横棒が右に回転します。
JavaScriptコーディング
最後にJavaScriptでクリックイベントを実装して完成です。
const hamburger=document.querySelectorAll('.hamburger');
hamburger[0].addEventListener('click',function(){
hamburger[0].classList.toggle('active');
});
hamburger[1].addEventListener('click',function(){
hamburger[1].classList.toggle('opacity');
});
hamburger[2].addEventListener('click',function(){
hamburger[2].classList.toggle('rotate');
});
- ハンバーガーアイコンを取得:
document.querySelectorAll('.hamburger')は、.hamburgerクラスを持つすべての要素を取得し、それぞれのハンバーガーアイコンを配列hamburgerに格納します。 - 1番目のハンバーガーアイコンにクリックイベントを追加:
1番目のハンバーガーアイコン（インデックス 0 の要素）にクリックイベントを追加します。クリックされると、activeクラスがトグルされることで1番目のアニメーション効果が適用されます。 - 2番目のハンバーガーアイコンにクリックイベントを追加:
2番目のハンバーガーアイコン（インデックス 1 の要素）にクリックイベントを追加します。クリックされると、opacityクラスがトグルされることで2番目のアニメーション効果が適用されます。 - 3番目のハンバーガーアイコンにクリックイベントを追加:
3番目のハンバーガーアイコン（インデックス 2 の要素）にクリックイベントを追加します。クリックされると、rotateクラスがトグルされることで3番目のアニメーション効果が適用されます。
これにより、各ハンバーガーアイコンをクリックすることで異なるアニメーション効果が適用されるようになります。例えば、1番目のハンバーガーアイコンをクリックすると active クラスが付与されて1番目のアニメーションが発生します。同様に、2番目のハンバーガーアイコンをクリックすると opacity クラスが付与されて2番目のアニメーションが発生し、3番目のハンバーガーアイコンをクリックすると rotate クラスが付与されて3番目のアニメーションが発生します。
リンク
リンク
リンク