公開日:2017.12.25 更新日:2020.05.13 jQuery, ナビゲーション ウィンドウ幅が一定の幅になるとハンバーガーメニューになり、クリックするとフルスクリーンで表示するレスポンシブなメニューを作成しました。 ハンバーガーメニューのエフェクトはNx World様のコードをお借りしています。 サンプル See the Pen レスポンシブでフルスクリーン表示するメニュー; by ponzu (@ponzu😉 on CodePen. ↓別ウィンドウで見たい方はこちら デモページ html htmlでは、スマホ表示になった時用のハンバーガーメニュー .nav-buttonと、PC表示、スマホ表示共通のナビゲーション用のコード .nav-wrap を記述します。 <div class="header"> <div class="logo">SITE NAME</div> <a
![フルスクリーン表示するjQueryのレスポンシブメニュー|Gimmick log](https://cdn-ak-scissors.b.st-hatena.com/image/square/259df94359e4a140b170bf7b3bcc3e43072c2f92/height=288;version=1;width=512/https%3A%2F%2Fgimmicklog.com%2Fwordpress%2Fwp-content%2Fuploads%2F2017%2F12%2Fthum-fullscreen.jpg)