Hamburger Menu Generator
by STUDIO NNC

世界一やさしいハンバーガーメニューの作り方｜コード生成ツールで簡単カスタマイズ！

プレビュー

{{ item.text }}

生成コード

HTML

CSS

JavaScript

ツールの使い方

  1. 左側の「トリガー設定」「展開メニュー設定」から、ハンバーガーメニューのデザイン・動作を自由にカスタマイズします。
    （線の太さや色、開閉アニメーション、メニュー項目の追加など）
  2. 右側の「プレビュー」で、リアルタイムに動作やデザインを確認できます。
    ※ボタンをクリックして展開・閉じるアニメーションもチェックできます！
  3. プレビューの下にある「HTML」「CSS」「JavaScript」のコードが自動生成されます。 必要なコードをそれぞれコピーしてください。
  4. コピーしたコードを、あなたのWebサイトのファイル（HTML / CSS / JS）に貼り付けるだけで、カスタマイズ済みのハンバーガーメニューが簡単に導入できます！
  5. デザインを変更したい場合は、再度設定を変更して、新しいコードを生成すればOKです。