【月額4,980円】
最短3ヶ月でwebデザイナーになる

[20個のサンプルコード!]レスポンシブ対応のオシャレなハンバーガーメニューの作り方

レスポンシブ対応のハンバーガーメニューを作る際に一から作るのは面倒ですよね。
今回は、忙しい方のためにコピペで作れるハンバーガーメニューを20個紹介していきます。

基本のハンバーガーボタン

前面に出てくるメニュー

See the Pen
シンプル全画面
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
シンプル上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
シンプル横から
by webpaisen (@webpaisen)
on CodePen.

回転して交差するハンバーガーボタン

前面に出てくるメニュー

See the Pen
くるっと交差全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
くるっと交差上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
くるっと交差横から
by webpaisen (@webpaisen)
on CodePen.

クルクル回るハンバーガーボタン

前面に出てくるメニュー

See the Pen
回転して全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
回転して上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
回転して横から
by webpaisen (@webpaisen)
on CodePen.

ころっと転がるハンバーガーボタン

前面に出てくるメニュー

See the Pen
ころっと全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
ころっと上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
ころっと横から
by webpaisen (@webpaisen)
on CodePen.

矢印に変わるハンバーガーボタン

上から出てくるメニュー

See the Pen
矢印上から
by webpaisen (@webpaisen)
on CodePen.

右から出てくるメニュー

See the Pen
右から+矢印
by webpaisen (@webpaisen)
on CodePen.

左から出てくるメニュー

See the Pen
左から+矢印
by webpaisen (@webpaisen)
on CodePen.

マイナス記号に変わるハンバーガーボタン

前面に出てくるメニュー

See the Pen
マイナス全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
マイナス上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
マイナス横から
by webpaisen (@webpaisen)
on CodePen.

閉じるボタンを丸で囲んだハンバーガーボタン

前面に出てくるメニュー

See the Pen
丸がつく全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
丸がつく上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
丸がつく横から
by webpaisen (@webpaisen)
on CodePen.

まとめ

See the Pen
回転して全体
by webpaisen (@webpaisen)
on CodePen.