レスポンシブ対応の実装例&コード付き!異なるデザインパターンのハンバーガーメニューを集めました!
HTML / CSS / JavaScript を記事後半に掲載していますので、気に入ったデザインがあれば自由にご利用ください。
シンプル
モダン
カード風
ミニマル
グラデーション
ボーダー
ネオン
ハンバーガーメニューとは?
ハンバーガーメニューは、三本線のアイコンで表されるメニューボタンです。クリックやタップでナビゲーションメニューを表示・非表示でき、スマホなどの狭い画面でよく使われます。
目次
【1】シンプル ハンバーガーメニュー
<div class="container">
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-menu">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
</nav>
</div>
【2】モダン ハンバーガーメニュー
<div class="container">
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-menu">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
</nav>
</div>
【3】カード風 ハンバーガーメニュー
<div class="container">
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-menu">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
</nav>
</div>
【4】ミニマル ハンバーガーメニュー
<div class="container">
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-menu">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
</nav>
</div>
【5】グラデーション ハンバーガーメニュー
<div class="container">
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-menu">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
</nav>
</div>
【6】ボーダー風 ハンバーガーメニュー
<div class="container">
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-menu">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
</nav>
</div>
【7】ネオン ハンバーガーメニュー
<div class="container">
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-menu">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
</nav>
</div>