実装コード付き！さまざまなデザインのハンバーガーメニューサンプルを集めました！
HTML / CSS / JavaScript を別ページに掲載していますので、気に入ったデザインがあれば自由にご利用ください。
Hamburger Menu Collection with Code Examples!
Explore various hamburger menu styles—all with implementation-ready HTML, CSS, and JavaScript available on separate pages. Feel free to use or customize any design you like.
ハンバーガーメニューとは？
ハンバーガーメニューは、三本線のアイコンで表されるメニューボタンです。クリックやタップでナビゲーションメニューを表示・非表示でき、スマホなどの狭い画面でよく使われます。
シンプル｜Simple
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
モダン｜Modern
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
カード風｜Card Style
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
ミニマル｜Minimal
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
グラデーション｜Gradient
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
ボーダー｜Border
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
ネオン｜Neon
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
グラスモーフィズム｜Glassmorphism
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
3D立体｜Three-Dimension
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
パステルカラー｜Pastel Colors
ノーマル
Normal
カスケード
Cascade
カスケード・サイド
Cascade-Side
本サイトで公開しているUIデザイン一覧
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS）
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開してい...