最近良く見かけるメニューですね。メニューボタンをクリックするとモーダルウィンドウが画面いっぱいに広がって項目が表示されるやつ。今まで一度も使ったことがなかったので、流行ってる(?)し、試しにちょっと作ってみました。 target擬似クラスを使えばCSSだけでも実装できるようなんですけど、フラグメント識別子を付けたり変えたりすると、ブラウザの「戻る」が反応してしまい、それが好みじゃなかったので、一般的なjQuery+CSSで実装しています。jQueryといっても、クリックイベントだけなので、実質CSSみたいなものですけど。 モーダルウィンドウメニュー 以下のリンクから試しに作ってみたもの(デモ)がご覧になれます。右上の「MENU」というところをクリックすると、モーダルウィンドウが表示されるようになっています。 DEMO PAGE 以下、簡単に仕組みとかを書いておきます。 モーダルウィンドウメ