IT初心者の分かったメモ

HTML

<div id="hamburger_sample">
 <span></span>
 <span></span>
 <span></span>
</div>
<nav id="nav">
 <ul>
  <li><a href="">ホーム</a></li>
  <li><a href="">サービス</a></li>
  <li><a href="">お問い合わせ</a></li>
 </ul>
</nav>

spanタグを3つ並べることで、三本線のハンバーガーアイコンを表現しています。CSSでデザインを調整することで、見た目を三本の横線にしています。
メニュー内容はnavタグ内に記述します。リスト形式にすることで、整理された見やすいナビゲーションになります。

CSS

#hamburger_sample {
  width: 30px;
  cursor: pointer;
  margin: 20px;
}

#hamburger_sample span {
  display: block;
  height: 3px;
  background: #333;
  margin: 5px 0;
  transition: 1s;
}

#nav {
　display: none;
  background: #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#nav li {
  border-bottom: 1px solid #ddd;
}

#nav a {
  display: block;  
  padding: 12px 16px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

#nav a:hover {
  background-color: #e0e0e0;
}

#nav.active {
  display: block;
}

.hamburger_sampleクラスでは、クリック可能な横幅30pxのエリアを作成しています。cursor: pointer;を指定することで、マウスを乗せたときに「クリックできる」ことが視覚的にわかるようになります。
各spanタグは細長い横棒としてデザインしています。transitionを使うことで、後述するアニメーションにより、開閉時の動きをスムーズにする準備ができます。
.navクラスはdisplay: none;により、初期状態ではメニューが非表示になっています。背景色や余白もここで設定しています。.nav.activeクラスはJavaScriptによってクラスactiveが追加されたとき、非表示だったメニューを表示するように設定しています。
つまり、.nav.activeが適用されているときだけ、メニューが表示される仕組みです。

JS

const hamburger_sample = document.getElementById('hamburger_sample');
const nav = document.getElementById('nav');

hamburger_sample.addEventListener('click', () => {
  nav.classList.toggle('active');
  hamburger_sample.toggle('active');
})

getElementById()を使って、HTMLの該当要素を取得しています。これにより、JavaScriptから「ハンバーガーアイコンをクリックしたときにメニューを表示する」という動作が可能になります。
classList.toggle(‘active’)は、クラスactiveが付いていなければ追加、付いていれば削除するという便利なメソッドです。
たとえば：

• 初回クリック → active が追加されてメニュー表示
• もう一度クリック → active が削除されてメニュー非表示

このように、1つのボタンでメニューの開閉を切り替える動きが実現できます。また、hamburger_sampleにもactiveを付与しているのは、次章で解説するアニメーションのための準備です。

ハンバーガーアイコンにアニメーションを加える

#hamburger_sample.active span:nth-of-type(1) {
 transform: rotate(45deg) translateY(11px);
}

#hamburger_sample.active span:nth-of-type(2) {
 opacity: 0;
}

#hamburger_sample.active span:nth-of-type(3) {
 transform: rotate(-45deg) translateY(-11px);
}

1本目の線は右上がりの斜め線に変形させます。rotate(45deg)で回転させ、translateY(11px)で少し下にずらすことで、中央に寄せてバランスの良い見た目にしています。
2本目の線はopacity: 0;で透明にし、非表示にします。これにより、3本線が「×（バツ）」に見えるようになります。
3本目の線は左上がりに変形し、上にずらします。1本目と組み合わせることで、ちょうど「×」の形になります。

これら3つの変形を組み合わせることで、ハンバーガーアイコンが「閉じるボタン（バツ）」に変化するアニメーションが実現できます。

#nav {
 max-height: 0;
 overflow: hidden;
 transition: max-height 1s ease;
}

#nav.active {
 max-height: 500px;
}

5. まとめ

今回は、HTML・CSS・JavaScriptを使って、シンプルなハンバーガーメニューの作り方をご紹介しました。
一見むずかしく感じるかもしれませんが、基本的なコードの組み合わせで簡単に実装できます。
また、アニメーションを加えることで、サイト全体のクオリティもぐっと向上します。
まずはこの記事のコードをコピペで試してみて、少しずつ自分のWebサイトに応用していきましょう。