最近良く見かけるメニューですね。メニューボタンをクリックするとモーダルウィンドウが画面いっぱいに広がって項目が表示されるやつ。今まで一度も使ったことがなかったので、流行ってる(?)し、試しにちょっと作ってみました。 target擬似クラスを使えばCSSだけでも実装できるようなんですけど、フラグメント識別子を付けたり変えたりすると、ブラウザの「戻る」が反応してしまい、それが好みじゃなかったので、一般的なjQuery+CSSで実装しています。jQueryといっても、クリックイベントだけなので、実質CSSみたいなものですけど。 モーダルウィンドウメニュー 以下のリンクから試しに作ってみたもの(デモ)がご覧になれます。右上の「MENU」というところをクリックすると、モーダルウィンドウが表示されるようになっています。 DEMO PAGE 以下、簡単に仕組みとかを書いておきます。 モーダルウィンドウメ
![非表示にしたメニューをクリックでモーダルウィンドウ風に画面いっぱいに表示する | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/453d88142fbb7b10f1ff6b4693cd72b11c3ead72/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F02%2Fcatch-modal-window-menu.jpg)