はじめに
当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。
何よりメニューをまとめられてすっきりした印象になりますし、スペースが広く使えるのでメインメニューだけでなくサブメニューまで網羅的に載せてサイトマップのように表示することもできます。
今回はそんなハンバーガーメニューをJavaScriptを使わずに実装する方法を解説します。
サンプル
右上のハンバーガーメニューをクリックするとフルスクリーンナビゲーションの表示を切り替えられます。
解説
HTML
<input type="checkbox" id="toggle-nav">
<label for="toggle-nav" class="hamburger">
<div></div>
<div></div>
<div></div>
</label>
ハンバーガーメニューにはフォームで使われるチェックボックスを利用します。labelの中の3つのdivがハンバーガーメニューの3本線になります。
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
フルスクリーンナビゲーションになる部分です。最初は見えないようにしておき、ハンバーガーメニューをクリックすることで表示を切り替えます。
CSS
.hamburger {
cursor: pointer;
position: fixed;
z-index: 1020;
top: 32px;
right: 32px;
width: 32px;
height: 14px;
margin: 0;
padding: 0;
div {
position: relative;
width: 100%;
height: 2px;
background-color: #000;
transition: background-color .5s, transform .5s;
&:nth-of-type(2) {
margin: 4px 0;
}
}
}
ハンバーガーメニューを右上に表示します。3本線のうち真ん中のひとつ（&:nth-of-type(2)）だけ上下に余白を設けています。
#toggle-nav {
display: none;
&:checked {
~ .hamburger {
height: 28px;
div {
background-color: #fff;
&:nth-of-type(1) {
margin-top: 6px;
transform: rotate(135deg);
}
&:nth-of-type(2) {
opacity: 0;
}
&:nth-of-type(3) {
margin-top: -12px;
transform: rotate(-135deg);
}
}
}
~ .menu {
opacity: 1;
visibility: visible;
}
}
}
まず、チェックボックス自体の表示をnoneにします。そして、チェックボックスがチェック状態（&:checked）になったときにハンバーガーメニューを変形させたりフルスクリーンナビゲーションの表示を切り替えています。
起点となるのはチェックボックスですので、CSSのクエリセレクターはチェックボックスからつながるように書く必要があります。
まとめ
ハンバーガーメニューの作り方を解説している記事はたくさんありますが、大抵はJavaScriptでクリックイベントを拾って処理するというやり方です。
しかしハンバーガーメニューくらいならJavaScriptを使わずにCSSだけで作れてしまいます。CSSだけのほうがシンプルでいいですよね。
参考にしてみてください。
JWTについて
【React】React イチから学習《発展編》
【React】React イチから学習《基礎編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《トラブルシューティング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《テーマ・スタイリング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《コンポーネント編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《概要編》
インフラストラクチャ自動化ツール「Terraform」について《ベストプラクティスとトラブルシューティング編》
【CSS+JS】背景画像の視差効果（パララックス）を実装する方法
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
【Rails】アプリケーションサーバー「Unicorn」の基本情報と実装方法
【Git】マージにおけるfast-forwardとnon-fast-forwardの違い
MySQL Workbenchでリモートサーバー上のMySQLにSSH接続する方法【接続できない場合の対処法あり】
【Rails】忘れがちなルーティングの書き方を総復習
【Rails】忘れがちなGemfileの書き方を総復習
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築