【すぐに使えるハンバーガーメニュー】レスポンシブ対応

1. シンプルなハンバーガーメニュー

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

このハンバーガーメニューは、クリックするとナビゲーションが表示されるシンプルな例です。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Hamburger Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <div class="menu-icon" id="menu-icon">
      &#9776; <!-- ハンバーガーアイコン -->
    </div>
    <nav id="nav-menu" class="nav-menu">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <script src="script.js"></script>
</body>
</html>

CSS

/* 全体のスタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* ヘッダーのスタイル */
header {
  background-color: #333;
  color: white;
  padding: 10px;
  position: relative;
}

/* メニューアイコンのスタイル */
.menu-icon {
  font-size: 24px;
  cursor: pointer;
  display: block;
}

/* ナビゲーションメニューの初期スタイル */
.nav-menu {
  display: none; /* 非表示に設定 */
}

.nav-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav-menu ul li {
  padding: 8px;
  background-color: #444;
  margin: 5px 0;
}

.nav-menu ul li a {
  color: white;
  text-decoration: none;
}

.nav-menu ul li a:hover {
  background-color: #555;
}

JavaScript

document.getElementById('menu-icon').addEventListener('click', function() {
  const navMenu = document.getElementById('nav-menu');
  if (navMenu.style.display === 'block') {
    navMenu.style.display = 'none';
  } else {
    navMenu.style.display = 'block';
  }
});

解説

HTML部分:
- メニューアイコン（<div id="menu-icon">）と、ナビゲーションメニュー（<nav id="nav-menu">）を定義しています。
CSS部分:
- .menu-icon でハンバーガーアイコンのスタイルを指定。
- .nav-menu はデフォルトで非表示 (display: none;) になっています。
JavaScript部分:
- ハンバーガーアイコンがクリックされると、ナビゲーションメニューが表示/非表示に切り替わる簡単なスクリプトです。

2. アニメーション付きハンバーガーメニュー

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

次に、アニメーション付きのハンバーガーメニューの例です。メニューがスライドインする効果を追加しています。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Hamburger Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <div class="menu-icon" id="menu-icon">
      &#9776; <!-- ハンバーガーアイコン -->
    </div>
    <nav id="nav-menu" class="nav-menu">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <script src="script.js"></script>
</body>
</html>

CSS

/* 全体のスタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* ヘッダーのスタイル */
header {
  background-color: #333;
  color: white;
  padding: 10px;
  position: relative;
}

/* メニューアイコンのスタイル */
.menu-icon {
  font-size: 24px;
  cursor: pointer;
  display: block;
}

/* ナビゲーションメニューのスタイル */
.nav-menu {
  position: absolute;
  top: 50px;
  right: -250px;
  width: 200px;
  background-color: #444;
  transition: right 0.3s ease-in-out;
}

.nav-menu.open {
  right: 0;
}

.nav-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav-menu ul li {
  padding: 8px;
  background-color: #444;
  margin: 5px 0;
}

.nav-menu ul li a {
  color: white;
  text-decoration: none;
}

.nav-menu ul li a:hover {
  background-color: #555;
}

JavaScript

document.getElementById('menu-icon').addEventListener('click', function() {
  const navMenu = document.getElementById('nav-menu');
  navMenu.classList.toggle('open');
});

解説

HTML部分:
- 前の例と同様の構造ですが、CSSによるスライドイン効果を付けています。
CSS部分:
- .nav-menu の right プロパティを調整し、表示されるときは0に、非表示のときはメニューが画面外に隠れるようにしています。
- .open クラスが追加されると、right の位置が0に変わり、メニューが表示されます。
JavaScript部分:
- クリックすると .open クラスがトグルされ、メニューがスライドイン・スライドアウトします。

3. CSSのみでのハンバーガーメニュー

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

JavaScriptを使わずに、checkboxを利用してハンバーガーメニューの表示・非表示を切り替える方法です。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Hamburger Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <input type="checkbox" id="menu-toggle">
    <label for="menu-toggle" class="menu-icon">&#9776;</label>
    <nav id="nav-menu" class="nav-menu">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

CSS

/* 全体のスタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* ヘッダーのスタイル */
header {
  background-color: #333;
  color: white;
  padding: 10px;
  position: relative;
}

/* メニューアイコンのスタイル */
.menu-icon {
  font-size: 24px;
  cursor: pointer;
  display: block;
}

/* チェックボックスを非表示にする */
#menu-toggle {
  display: none;
}

/* ナビゲーションメニューのスタイル */
.nav-menu {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  width: 200px;
  background-color: #444;
}

/* チェックが入るとナビゲーションメニューを表示する */
#menu-toggle:checked + .menu-icon + .nav-menu {
  display: block;
}

.nav-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav-menu ul li {
  padding: 8px;
  background-color: #444;
  margin: 5px 0;
}

.nav-menu ul li a {
  color: white;
  text-decoration: none;
}

.nav-menu ul li a:hover {
  background-color: #555;
}

解説

HTML部分:
- ハンバーガーメニューのトグルに<input type="checkbox">を使用し、ラベル<label>タグでアイコンをクリックできるようにします。
CSS部分:
- #menu-toggle（チェックボックス）は非表示にし、チェックが入った状態で+セレクタを利用してメニューのdisplayプロパティを切り替えています。
- これにより、JavaScriptを使わずにクリックでメニューの表示・非表示が切り替わります。