【CodePen】ハンバーガーメニューのアイデア10選

💡 実装のポイント
9種類のアイコンパターンが1つのCSSにまとまっている構成。.nav-icon-1〜.nav-icon-8のクラスごとに独立したスタイルなので、使いたいパターンの番号のブロックだけ抜き出せばOK。色はbackground（アイコン背景）とspanのbackground-colorを変えるだけで着せ替え可能。

💡 実装のポイント
SVGの<path>座標をJSでアニメーションさせる仕組み。色は.icon { stroke: #FFFFFF }と#b1〜#b6のbackgroundで変更可能（CSS内にコメントアウトされたカラーパレット案が複数用意されていて差し替えやすい）。ただし動きの本体はJS側の座標計算なので、アニメーションのタイミング調整は難易度高め。

💡 実装のポイント
SCSS変数$menu-icon-dash-color（線の色）と$menu-icon-size（アイコン全体のサイズ）を変えるだけで9パターン全部に反映される設計。9種類の開閉アニメーションパターンが.example-1〜.example-9に分かれてるので、気に入った番号のブロックだけ抜き出して使える。

💡 実装のポイント
これは紹介用ツール的なPenで、JSでランダムに180パターン生成→クリックした1個のCSS/HTMLだけ書き出す仕組み。実装に使うなら、生成された中から好きな1個を選んで出力されたコードだけコピペする形になる（全体のロジックごと移植するのは非推奨）。

💡 実装のポイント
12パターンが#hamburger-1〜#hamburger-12のIDで完全に独立してるので、好きな番号のCSSブロックだけ抜き出せば単体でも使える。色は.lineのbackground-color（線）と.row .threeのbackground-color（背景）の2箇所だけ変えればOK。JSはtoggleClass("is-active")のみのシンプル構成。

💡 実装のポイント
5種類（ハンバーガー/ドネル/ベント/ケバブ/ミートボール）がそれぞれ.menu__item--◯◯クラスで独立してる。線の太さは.lineのheight、アイコン全体のサイズは.menu__wrapper > divのwidth/heightで一括調整可能。JSなし、hoverとfocus両対応でアクセシビリティ配慮あり。

💡 実装のポイント
10種類が#menu01〜#menu10のIDで完全分離、線の色は各パターン共通でbackground: #fffを変えるだけ。JSはNo.1本文のclassList.toggleのみでシンプル。No.9・10のスライドアウト系は動きが凝っていて実務でも映える。

💡 実装のポイント
7パターンが:nth-child(1)〜(7)で分岐、hover時のみアニメーションする仕様（クリックではない点に注意）。線の色は.barのbackground-colorのみ変更すればOK。No.2は丸に変形する演出、No.6・7はタイミングをずらした複雑なkeyframesを使用。抜き出す際は対応するkeyframes名も一緒にコピーする必要あり。

💡 実装のポイント
Type1〜4×Style1〜5の20パターン組み合わせという規模の大きいセット。命名規則が--type-◯--style-△なので、必要な組み合わせのクラス名だけ拝借すればOK。線の色はJS側でaccentColorを動的取得する仕組み（テーマ用途）なので、単体利用時はCSSのbackground: #000に固定するのがおすすめ。全部理解して使うより「気に入った1〜2パターンだけ抽出」が現実的。

💡 実装のポイント
6パターンが.menu-icon-1〜.menu-icon-6で分離、色は$basic-icon-colorのSCSS変数1つで一括管理。No.5が「×」型に変形する定番パターンで一番実務向き。クリックでopenedクラスをtoggleするシンプルなjQuery仕様。