ハンバーガーメニューを開くときにCSSで動きをつける

ChatGPT先生に教えてもらったこと。自身の学習用。

ハンバーガーメニューを開くときに動きをつけるには、CSSのトランジションまたはアニメーションを利用します。以下の手順で実装できます。

---

1. CSSトランジションを利用した方法

「高さが0から自動（auto）に変わる」の場合はmax-height使用するのが一般的です。height: auto;ではトランジションが止まらないためです。

コード例

.header-hmbnav { 
  display: block; 
  position: absolute; 
  top: 100%; // ヘッダー直下 
  left: 0; 
  max-height: 0; // 初期状態で非表示 
  overflow: hidden; // コンテンツが見えないように 
  width: 100%; 
  background-color: $White; 
  color: $TextBlack; 
  transition: max-height 0.5s ease; // トランジションで動きを設定 
  z-index: 1200; 
 } 

input[type="checkbox"]:checked ~ .header-hmbnav { 
  max-height: 500px; // メニューの高さ（大きめに設定） 
}

ポイント

• max-heightを設定：初期状態では0、開くときは十分な高さ（例500px）に変更します。

• overflow: hidden;追加：非表示部分が見えなくなります。

• トランジション：max-heightに対して適用。

---

2. CSSアニメーションを利用した方法

アニメーションを使えば、カスタマイズ性の高いストーリーを作ります。

コード例

@keyframes slideDown {
 from { max-height: 0; opacity: 0; } to { max-height: 500px; opacity: 1; } 
} 

@keyframes slideUp { 
from { max-height: 500px; opacity: 1; } to { max-height: 0; opacity: 0; } } 

.header-hmbnav {
 max-height: 0; 
 overflow: hidden;
 width: 100%;
 background-color: $White;
 color: $TextBlack;
 z-index: 1200;
 opacity: 0;
 transition: none; // アニメーションと混在しないように無効化 } 

input[type="checkbox"]:checked ~ .header-hmbnav {
 animation: slideDown 0.5s ease forwards; // 開くときのアニメーション
 } 

input[type="checkbox"]:not(:checked) ~ .header-hmbnav {
 animation: slideUp 0.5s ease forwards; // 閉じるときのアニメーション
 }

ポイント

• @keyframesで動きの定義：slideDown（開く動き）とslideUp（閉じる動き）を作成します。

• forwardsを指定：アニメーション終了時に状態を維持します。

• トランジションのオンラインに注意：transitionは有効化。

---

3. より自然な動きを追加する工夫

• easingを調整：ease-in-outやcubic-bezierを使うと自然な動きになります。

• 速度の調整：0.3s～0.7sの範囲で試してみると良い動きが見つかりやすいです。

• 追加の効果：opacityを併用するとより検討になります。

---

どちらを使うべきか？

• 簡単な対処が欲しい→トランジション（推奨max-height）。

• カスタマイズの高い意思決定が欲しい →アニメーション。