レスポンシブデザインのグローバルナビゲーションについて

Question

質問させていただきます。

http://litalico.co.jp/

こちらのサイトのグローバルメニューについてなのですが
タブレット以下の画面サイズになると右上にメニューが出て
そこを押すとURLは変わらずに新しい画面でメニューがでてきます。

このようなメニューはどのようにして作られているのでしょうか？
それとこのメニューの正式名称もありましたら教えてください。

どなたか、解決していただける方、お待ちしております。
よろしくお願いいたします。

Answer 1

このメニューの正式名称もありましたら教えてください

「ハンバーガーメニュー」です。

jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える | webOpixel

Comments

[Cf_cwd]

ドロワーメニューが正式名称ではないですかね？
ハンバーガーメニューはアイコンに由来する通称だったような気がします
(本題ではないのでどうでもいいのですが……)

[Lhankor_Mhy]

あ、そうなんですね。知りませんでした。

Answer 2

メニューをクリックすると<div class="hdr-zp-menu">が表示されるようになってます。
その時、コンテンツである<div id="sp-cnts">が非表示になるようになっています。
表示非表示はjQueryのclickイベントだと思います。
こういうメニューに名前はついているのかもしれないですが、私はちょっとわかりません...

Answer 3

新しい画面でサイトが開かれたように見えると思うのですが、これはdivなどのタグを組み合わせて作られた疑似的なウィンドウのようなものです。
lightboxなどのjQueryプラグインも同じことですね。
基本的にはJavaScript(やそのライブラリ)を使って、タグの表示、非表示を切り替えている物だとお考えください。