ハンバーガーメニュー

<header class="l-header">
<div class="l-wrapper">
<h1 class="l-header-title">
<span class="screen-reader-text" lang="en">Green</span>
<a href="./">
<img src="images/logo.png" srcset="images/logo.png 1x, images/logo@2x.png 2x"  alt="Green">
</a>
</h1>

<nav class="l-header-nav">
<h2 class="screen-reader-text">サイト内メニュー</h2>
<button type="button" class="button-hamburger" aria-controls="global-nav" aria-expanded="false">
<span class="hamburger">
<span class="screen-reader-text">メニュー開閉</span>
</span>
</button>
<ul id="global-nav" class="l-global-nav" lang="en">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
<ul>
</nav>

</div>
<!--/ .l-wrapper -->
</header>
...

.l-wrapper {
width: 95%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}

/* header */
.l-header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: .75em 0;
border-bottom: 1px solid #e0e0e0;
background-color: #fff;
// rightやleftでドロワー表示をしてもいいけど、IE10移行対応であれば
アニメーションを使った方が滑らかな動きをする
transition: transform .3s ease-in-out; /* IE9非対応 */
transform: translateX(100%);
// ベンダープレフィックスがないと動かないものもある
}

.l-header-title {
float: left;
}

.l-header-nav {
float: right;
}

@media screen and (min-width:768px) {
.l-header {
padding: 1.5em 0;
}
}
@media screen and (min-width:1024px) {
.l-header {
padding: 1.75em 0;
}
}

/* gloval nav */
.l-global-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
// 余白
width: 100%;（なくてもいい）
height: 120%;
// 背景

}

.l-global-nav li a {
display: block;（横幅めいいっぱいタップ）
color: #263238;（デフォルトがaに直接青になれと命令してるから）
text-decoration: none;
// 余白とか
}

.l-global-nav li a:hover {
// 背景色
// 文字色
}

@media screen and (min-width: 768px) {
.l-globalnav {
position: static;（fixedをとる　staticは初期値）
// 余白とったり、背景色をtransparent;←#fffだと、navの背景色を変えたとき、ここも変えないといけなくなる
transform: translateX(0);
}
.l-globalnav li {
float: left;
}
.l-globalnav li + li {
margin-left: 1em;
}
.l-global-nav li a {
// 余白調整や文字色など
}

/* 
  module
-------------------------------------------*/
/* button */
.button-humburger {
position: absolute;
top: 0;
bottom: 0;
right: 2.5%;（relativeがなく、外に飛び出ている。l-wrapperのwidthに合わせて揃えてしまう。片側2.5%）
width: 24px;
height: 24px;
margin: auto 0;（計算してもいいが、ヘッダーのheightもこの要素のheightも決まっているのでmarginで指定できる）
border: 0;（装飾を消す）
outline: 0;（装飾を消す）
background-color: transparent;（装飾を消す）
cursor: pointer;（装飾を消す）
appearance:none;（装飾を消す）←ベンダープレ必要
}

.hamburger {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
display: block; （spanはインラインで幅と高さが持てない）
width: 18px;
height: 2px;
margin: auto;
border-radius: 4px;
background-color: #    ;
}

.hamburger: before,
.hamberger after {
content: '';
display; block;
position: absolute;
width: 100%;
height: 100%
border-radius: 4px;
background-color: inherit;（継承）
}
.hamburger: before {
top: -5px;
}
.hamburger: after {
top: 5px;
}

@media screen and (min-width:768px) {
.button-humburger {
display: none;
}
}