Pure CSS Menu with :checked

#Pure CSS Three Lines Menu with :checked

CSSのみの simple な hamburger menu です。
CSSのみですのでjQueryやJavaScriptは利用していません。
ただ、如何せん、WEBの業務に従事しているわけでもない素人製なので…(恥)

（demoではdivを5個並べてみました）

※IE10以下やAndroid4.3以下は考慮対象外にしました。

[`demo`](http://bl.ocks.org/feo52/raw/e006206a86b9d913bf1f/)
[`code`](https://gist.github.com/feo52/e006206a86b9d913bf1f)

####HTML

```html
	<input       id   ="nav-switch" type="checkbox">
	<div         class="nav-window nav-color-green">
		<label   class="nav-sensor" for="nav-switch"></label>
		<div     class="nav-subwin">
			<div class="nav-option"><a href="#">Menu01</a></div>
			<div class="nav-option"><a href="#">Menu02</a></div>
			<div class="nav-option"><a href="#">Menu03</a></div>
			<div class="nav-option"><a href="#">Menu04</a></div>
			<div class="nav-option"><a href="#">Menu05</a></div>
		</div>
	</div>
```

####CSS

```css
/* -------------------------------------------------------------------------
   Pure CSS Three Lines Menu with :checked
   ---------------------------------------------------------------------- */
#nav-switch {
	display: none;
}
#nav-switch + .nav-window {
	background: #202020;
	color:      #FAFAFA;
}
#nav-switch + .nav-window a {
	color: inherit;
	text-decoration: none;
}
#nav-switch + .nav-window > .nav-sensor {
	display: none;
}
#nav-switch + .nav-window > .nav-subwin > .nav-option {
	display: inline-block;
}
@media screen and (max-width: 767px) {
#nav-switch + .nav-window {
	overflow: hidden;
	max-width:  40px;   /* 40px = 32px + 4px x 2 */
	max-height: 40px;   /* 40px = 32px + 4px x 2 */
	transition: max-width 1s, max-height 1s;
}
#nav-switch:checked + .nav-window {
	max-width:  100vw;
	max-height: 100vh;
}
#nav-switch + .nav-window > .nav-subwin {
	max-height: 0px;
	transition: max-height 1s;
}
#nav-switch:checked + .nav-window > .nav-subwin {
	overflow: auto;
	max-height: calc(100vh - 40px);
}
#nav-switch + .nav-window > .nav-sensor {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	cursor:  pointer;
	display: inline-block;
	margin:     4px;
	font-size: 32px;    /* font-size : multiples of 16px */
}
#nav-switch + .nav-window > .nav-subwin > .nav-option {
	display: block;
}
}
/* -------------------------------------------------------------------------
   Pure CSS Three Lines Icon & Cross Lines Icon
   ---------------------------------------------------------------------- */
#nav-switch + .nav-window > .nav-sensor {
	width:  1em;
	height: 1em;
	position: relative;
/*	position: absolute;  */
	box-sizing: border-box;
	border: 0.125em solid #FAFAFA;
	border-radius: 20%;
}
#nav-switch + .nav-window > .nav-sensor::after {
	content: "";
	position: absolute;
	top:    0.3125em;
	left:   0.125em;
	width:  0.5em;
	height: 0.125em;
	background:   #FAFAFA;
}
#nav-switch + .nav-window > .nav-sensor::before {
	content: "";
	position: absolute;
	top:    0.125em;
	left:   0.125em;
	width:  0.5em;
	height: 0.5em;
	box-sizing: border-box;
	border-style: solid;
	border-width: 0.125em 0em;
	border-color: rgba(250,250,250,1);
	background:   rgba(250,250,250,0);
}
#nav-switch:checked + .nav-window > .nav-sensor {
	width:  1em;
	height: 1em;
	position: relative;
/*	position: absolute;  */
	box-sizing: border-box;
	border: 0.125em solid #FAFAFA;
	border-radius: 50%;
}
#nav-switch:checked + .nav-window > .nav-sensor::after {
	content: "";
	position: absolute;
	top:    0.3125em;
	left:   0.125em;
	width:  0.5em;
	height: 0.125em;
	background:   #FAFAFA;
	transform: rotate(-45deg);
}
#nav-switch:checked + .nav-window > .nav-sensor::before {
	content: "";
	position: absolute;
	top:    0.3125em;
	left:   0.125em;
	width:  0.5em;
	height: 0.125em;
	box-sizing: border-box;
	border-style: solid;
	border-width: 0em;
	border-color: rgba(250,250,250,0);
	background:   rgba(250,250,250,1);
	transform: rotate(45deg);
}
/* -------------------------------------------------------------------------
   Pure CSS Three Lines Icon & Cross Lines Icon transition
   ---------------------------------------------------------------------- */
#nav-switch + .nav-window > .nav-sensor {         transition: border-radius 0.6s 0.1s; }
#nav-switch + .nav-window > .nav-sensor::after {  transition:     transform 0.2s 0.0s; }
#nav-switch + .nav-window > .nav-sensor::before { transition:     transform 0.2s 0.0s, 
	top           0.2s 0.3s,
	height        0.2s 0.3s,
	border-width  0.2s 0.3s,
	border-color  0.2s 0.3s,
	background    0.2s 0.3s;
}
#nav-switch:checked + .nav-window > .nav-sensor {         transition: border-radius 0.6s 0.1s; }
#nav-switch:checked + .nav-window > .nav-sensor::after {  transition:     transform 0.2s 0.3s; }
#nav-switch:checked + .nav-window > .nav-sensor::before { transition:     transform 0.2s 0.3s, 
	top           0.2s 0.0s,
	height        0.2s 0.0s,
	border-width  0.2s 0.0s,
	border-color  0.2s 0.0s,
	background    0.2s 0.0s;
}
/* -------------------------------------------------------------------------
   Position
   ---------------------------------------------------------------------- */
#nav-switch + .nav-window.nav-absolute {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
#nav-switch + .nav-window.nav-sticky {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
}
#nav-switch + .nav-window.nav-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
/* -------------------------------------------------------------------------
   Color
   ---------------------------------------------------------------------- */
#nav-switch         + .nav-window.nav-color-black   { background: black  ; }
#nav-switch         + .nav-window.nav-color-silver  { background: silver ; }
#nav-switch         + .nav-window.nav-color-gray    { background: gray   ; }
#nav-switch         + .nav-window.nav-color-white   { background: white  ; }
#nav-switch         + .nav-window.nav-color-maroon  { background: maroon ; }
#nav-switch         + .nav-window.nav-color-red     { background: red    ; }
#nav-switch         + .nav-window.nav-color-purple  { background: purple ; }
#nav-switch         + .nav-window.nav-color-fuchsia { background: fuchsia; }
#nav-switch         + .nav-window.nav-color-green   { background: green  ; }
#nav-switch         + .nav-window.nav-color-lime    { background: lime   ; }
#nav-switch         + .nav-window.nav-color-olive   { background: olive  ; }
#nav-switch         + .nav-window.nav-color-yellow  { background: yellow ; }
#nav-switch         + .nav-window.nav-color-navy    { background: navy   ; }
#nav-switch         + .nav-window.nav-color-blue    { background: blue   ; }
#nav-switch         + .nav-window.nav-color-teal    { background: teal   ; }
#nav-switch         + .nav-window.nav-color-aqua    { background: aqua   ; }
#nav-switch         + .nav-window.nav-color-orange  { background: orange ; }
#nav-switch         + .nav-window.nav-color-white { color: black; }
#nav-switch         + .nav-window.nav-color-white > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-white > .nav-sensor { border: 0.125em solid black; }
#nav-switch         + .nav-window.nav-color-white > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-white > .nav-sensor::after { background: black; }
#nav-switch         + .nav-window.nav-color-white > .nav-sensor::before { border-color: rgba(0,0,0,1); background: rgba(0,0,0,0); }
#nav-switch:checked + .nav-window.nav-color-white > .nav-sensor::before { border-color: rgba(0,0,0,0); background: rgba(0,0,0,1); }
#nav-switch         + .nav-window.nav-color-black   ,
#nav-switch         + .nav-window.nav-color-silver  ,
#nav-switch         + .nav-window.nav-color-gray    ,
#nav-switch         + .nav-window.nav-color-maroon  ,
#nav-switch         + .nav-window.nav-color-red     ,
#nav-switch         + .nav-window.nav-color-purple  ,
#nav-switch         + .nav-window.nav-color-fuchsia ,
#nav-switch         + .nav-window.nav-color-green   ,
#nav-switch         + .nav-window.nav-color-lime    ,
#nav-switch         + .nav-window.nav-color-olive   ,
#nav-switch         + .nav-window.nav-color-yellow  ,
#nav-switch         + .nav-window.nav-color-navy    ,
#nav-switch         + .nav-window.nav-color-blue    ,
#nav-switch         + .nav-window.nav-color-teal    ,
#nav-switch         + .nav-window.nav-color-aqua    ,
#nav-switch         + .nav-window.nav-color-orange  { color: white; }
#nav-switch         + .nav-window.nav-color-black   > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-silver  > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-gray    > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-maroon  > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-red     > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-purple  > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-fuchsia > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-green   > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-lime    > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-olive   > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-yellow  > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-navy    > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-blue    > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-teal    > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-aqua    > .nav-sensor ,
#nav-switch         + .nav-window.nav-color-orange  > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-black   > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-silver  > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-gray    > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-maroon  > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-red     > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-purple  > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-fuchsia > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-green   > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-lime    > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-olive   > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-yellow  > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-navy    > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-blue    > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-teal    > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-aqua    > .nav-sensor ,
#nav-switch:checked + .nav-window.nav-color-orange  > .nav-sensor { border: 0.125em solid white; }
#nav-switch         + .nav-window.nav-color-black   > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-silver  > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-gray    > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-maroon  > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-red     > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-purple  > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-fuchsia > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-green   > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-lime    > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-olive   > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-yellow  > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-navy    > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-blue    > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-teal    > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-aqua    > .nav-sensor::after ,
#nav-switch         + .nav-window.nav-color-orange  > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-black   > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-silver  > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-gray    > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-maroon  > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-red     > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-purple  > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-fuchsia > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-green   > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-lime    > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-olive   > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-yellow  > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-navy    > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-blue    > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-teal    > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-aqua    > .nav-sensor::after ,
#nav-switch:checked + .nav-window.nav-color-orange  > .nav-sensor::after { background: white; }
#nav-switch         + .nav-window.nav-color-black   > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-silver  > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-gray    > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-maroon  > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-red     > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-purple  > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-fuchsia > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-green   > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-lime    > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-olive   > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-yellow  > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-navy    > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-blue    > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-teal    > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-aqua    > .nav-sensor::before ,
#nav-switch         + .nav-window.nav-color-orange  > .nav-sensor::before { border-color: rgba(255,255,255,1); background: rgba(255,255,255,0); }
#nav-switch:checked + .nav-window.nav-color-black   > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-silver  > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-gray    > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-maroon  > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-red     > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-purple  > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-fuchsia > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-green   > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-lime    > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-olive   > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-yellow  > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-navy    > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-blue    > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-teal    > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-aqua    > .nav-sensor::before ,
#nav-switch:checked + .nav-window.nav-color-orange  > .nav-sensor::before { border-color: rgba(255,255,255,0); background: rgba(255,255,255,1); }
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   for IE11 bug
   ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and                         (max-width:  100px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width:  100px; } }
@media screen and (min-width:  100px) and (max-width:  200px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width:  200px; } }
@media screen and (min-width:  200px) and (max-width:  300px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width:  300px; } }
@media screen and (min-width:  300px) and (max-width:  400px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width:  400px; } }
@media screen and (min-width:  400px) and (max-width:  500px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width:  500px; } }
@media screen and (min-width:  500px) and (max-width:  600px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width:  600px; } }
@media screen and (min-width:  600px) and (max-width:  700px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width:  700px; } }
@media screen and (min-width:  700px) and (max-width:  800px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width:  800px; } }
@media screen and (min-width:  800px) and (max-width:  900px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width:  900px; } }
@media screen and (min-width:  900px) and (max-width: 1000px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1000px; } }
@media screen and (min-width: 1000px) and (max-width: 1100px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1100px; } }
@media screen and (min-width: 1100px) and (max-width: 1200px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1200px; } }
@media screen and (min-width: 1200px) and (max-width: 1300px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1300px; } }
@media screen and (min-width: 1300px) and (max-width: 1400px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1400px; } }
@media screen and (min-width: 1400px) and (max-width: 1500px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1500px; } }
@media screen and (min-width: 1500px) and (max-width: 1600px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1600px; } }
@media screen and (min-width: 1600px) and (max-width: 1700px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1700px; } }
@media screen and (min-width: 1700px) and (max-width: 1800px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1800px; } }
@media screen and (min-width: 1800px) and (max-width: 1900px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 1900px; } }
@media screen and (min-width: 1900px) and (max-width: 2000px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 2000px; } }
@media screen and (min-width: 2000px) and (max-width: 2200px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 2200px; } }
@media screen and (min-width: 2200px) and (max-width: 2400px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 2400px; } }
@media screen and (min-width: 2400px) and (max-width: 2600px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 2600px; } }
@media screen and (min-width: 2600px) and (max-width: 2800px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 2800px; } }
@media screen and (min-width: 2800px) and (max-width: 3000px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 3000px; } }
@media screen and (min-width: 3000px) and (max-width: 3200px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 3200px; } }
@media screen and (min-width: 3200px) and (max-width: 3400px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 3400px; } }
@media screen and (min-width: 3400px) and (max-width: 3600px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 3600px; } }
@media screen and (min-width: 3600px) and (max-width: 3800px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 3800px; } }
@media screen and (min-width: 3800px) and (max-width: 4000px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 4000px; } }
@media screen and (min-width: 4000px) and (max-width: 4500px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 4500px; } }
@media screen and (min-width: 4500px) and (max-width: 5000px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 5000px; } }
@media screen and (min-width: 5000px) and (max-width: 5500px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 5500px; } }
@media screen and (min-width: 5500px) and (max-width: 6000px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 6000px; } }
@media screen and (min-width: 6000px) and (max-width: 6500px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 6500px; } }
@media screen and (min-width: 6500px) and (max-width: 7000px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 7000px; } }
@media screen and (min-width: 7000px) and (max-width: 7500px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 7500px; } }
@media screen and (min-width: 7500px) and (max-width: 8000px) { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 8000px; } }
@media screen and (min-width: 8000px)                         { _::-ms-backdrop, #nav-switch:checked + .nav-window { max-width: 9999px; } }
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   for IE11 bug & for Edge bug
   ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and                         (max-height: 100px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height: 100px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:   60px; } }
@media screen and (min-height: 100px) and (max-height: 200px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height: 200px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:  160px; } }
@media screen and (min-height: 200px) and (max-height: 300px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height: 300px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:  260px; } }
@media screen and (min-height: 300px) and (max-height: 400px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height: 400px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:  360px; } }
@media screen and (min-height: 400px) and (max-height: 500px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height: 500px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:  460px; } }
@media screen and (min-height: 500px) and (max-height: 600px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height: 600px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:  560px; } }
@media screen and (min-height: 600px) and (max-height: 700px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height: 700px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:  660px; } }
@media screen and (min-height: 700px) and (max-height: 800px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height: 800px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:  760px; } }
@media screen and (min-height: 800px) and (max-height: 900px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height: 900px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:  860px; } }
@media screen and (min-height: 900px) and (max-height:1000px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1000px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height:  960px; } }
@media screen and (min-height:1000px) and (max-height:1100px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1100px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1060px; } }
@media screen and (min-height:1100px) and (max-height:1200px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1200px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1160px; } }
@media screen and (min-height:1200px) and (max-height:1300px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1300px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1260px; } }
@media screen and (min-height:1300px) and (max-height:1400px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1400px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1360px; } }
@media screen and (min-height:1400px) and (max-height:1500px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1500px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1460px; } }
@media screen and (min-height:1500px) and (max-height:1600px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1600px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1560px; } }
@media screen and (min-height:1600px) and (max-height:1700px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1700px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1660px; } }
@media screen and (min-height:1700px) and (max-height:1800px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1800px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1760px; } }
@media screen and (min-height:1800px) and (max-height:1900px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:1900px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1860px; } }
@media screen and (min-height:1900px) and (max-height:2000px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:2000px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 1960px; } }
@media screen and (min-height:2000px) and (max-height:2200px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:2200px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 2160px; } }
@media screen and (min-height:2200px) and (max-height:2400px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:2400px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 2360px; } }
@media screen and (min-height:2400px) and (max-height:2600px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:2600px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 2560px; } }
@media screen and (min-height:2600px) and (max-height:2800px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:2800px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 2760px; } }
@media screen and (min-height:2800px) and (max-height:3000px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:3000px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 2960px; } }
@media screen and (min-height:3000px) and (max-height:3200px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:3200px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 3160px; } }
@media screen and (min-height:3200px) and (max-height:3400px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:3400px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 3360px; } }
@media screen and (min-height:3400px) and (max-height:3600px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:3600px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 3560px; } }
@media screen and (min-height:3600px) and (max-height:3800px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:3800px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 3760px; } }
@media screen and (min-height:3800px) and (max-height:4000px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:4000px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 3960px; } }
@media screen and (min-height:4000px) and (max-height:4500px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:4500px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 4460px; } }
@media screen and (min-height:4500px) and (max-height:5000px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:5000px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 4960px; } }
@media screen and (min-height:5000px) and (max-height:5500px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:5500px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 5460px; } }
@media screen and (min-height:5500px) and (max-height:6000px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:6000px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 5960px; } }
@media screen and (min-height:6000px) and (max-height:6500px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:6500px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 6460px; } }
@media screen and (min-height:6500px) and (max-height:7000px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:7000px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 6960px; } }
@media screen and (min-height:7000px) and (max-height:7500px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:7500px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 7460px; } }
@media screen and (min-height:7500px) and (max-height:8000px) { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:8000px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 7960px; } }
@media screen and (min-height:8000px)                         { _:-ms-lang(x),   #nav-switch:checked + .nav-window { max-height:9999px; } _:-ms-lang(x), #nav-switch:checked + .nav-window > .nav-subwin { max-height: 9959px; } }
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
```

####Menuの開閉の作り

Menuの開閉の作りは簡単で、
checkboxにcheckがされてない場合は .navWindow の 縦と横を40px で clipping して表示、
checkboxにcheckがされている場合は .navWindow を 100vwと100vh で clipping して表示、
としています。

####IE11 & Edge

[CSS Transitions Editor’s Draft](https://drafts.csswg.org/css-transitions/) の [Animation of interpolated property types](https://drafts.csswg.org/css-transitions/#animtype-lpcalc) によると、
40px ⇔ 100vw など、違う単位の transition は、
処理内で calc() する、とのことのようですが、
IE11 ( & IE10 ) は [transition の処理内の calc() が bug](https://connect.microsoft.com/IE/feedback/details/762719/css3-calc-bug-inside-transition-or-transform) っています。
また、
[CSS Transitions Editor’s Draft](https://drafts.csswg.org/css-transitions/) の [Properties from CSS](https://drafts.csswg.org/css-transitions/#animatable-css) によると、
calc() を開始時や終了時の値に使用するのも仕様上ではokなようですが、
Edge は bug っているのか transition しません。
そのせいで Media Queries がm9プギャー状態になっています。

####＋α

MENUのリンクのクリック時、
ウインドウサイズの変更時、
MENUを閉じる処理を追加するためのJavaScriptです。
( Pure CSS と言っているのにアレですが... )

```html
<script>
document.addEventListener("DOMContentLoaded", function(){
	"use strict";
	function navCheckboxOff() {  document.getElementById("nav-switch").checked = false; }
	Array.prototype.forEach.call(document.querySelectorAll(".nav-option a"),function(e,i,a){e.addEventListener('click',navCheckboxOff,false)});
	window.addEventListener('resize',navCheckboxOff,false);
}, false);
</script>
```