ハンバーガーメニューの実装

スマホから、サイトを見る時に、ハンバーガーメニューを作りたく、ハンバーガーメニューを使われており、全画面に広がるような、サイトを探してみたところ、下記のサイトのモバイル版のハンバーガーメニューのようなものを作りたく、コードをみてみたのですが、どの部分が関係しているかわからないので、作り方を教えてください。

参考サイト：
https://fischerspark.com

退会済みユーザー

2019/08/15 13:59

https://teratail.com/help/avoid-asking より抜粋 > コードをください・デバッグしてください等の丸投げの質問 > > 何かを作りたいのでコードを書いてほしい、学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、推奨していません。 > 問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。 > まずは実際に作業に取り組み、つまづいたところで投稿をしてみてください。

この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。

行動規範の内容に同意します

回答1件

ベストアンサー

簡単に作りました。
色々適当です。
jQuery使ってます

HTML
1<header>
2  <h1>サイトだよ</h1>
3  <span>MENU開けるよ</span>
4  <div>MENUだよ</div>
5</header>
6<section>
7  本文だぜ
8</section>

CSS
1*{
2  margin: 0;
3  padding: 0
4}
5header {
6  background: skyblue;
7  position: fixed;
8  z-index:100;
9  width:100vw;
10  top:0;
11}
12section {
13  margin-top: 2em;
14}
15h1 {
16  font-size: 2em;
17  display: inline-block;
18  font-weight: normal
19}
20div {
21  width :100vw;
22  height: calc(100vh - 2em);
23  display: none;
24}

javascript
1$(function () {
2    $('span').click(function () { $('div').animate({ height: 'toggle'}, 'slow' ); });
3  $('section').css('margin-top',$('header').outerHeight());
4});