Last active
July 9, 2017 11:00
-
-
Save feo52/e006206a86b9d913bf1f to your computer and use it in GitHub Desktop.
Pure CSS Three Lines Menu with :checked
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Pure CSS Three Lines Menu with :checked</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| #nav-switch + .nav-window > .nav-sensor { border-radius: 20%; } /* for Chrome bug? */ | |
| </style> | |
| </head> | |
| <body> | |
| <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> | |
| PI = 3. | |
| 14159265358979323846264338327950288419716939937510<br> | |
| 58209749445923078164062862089986280348253421170679<br> | |
| 82148086513282306647093844609550582231725359408128<br> | |
| 48111745028410270193852110555964462294895493038196<br> | |
| 44288109756659334461284756482337867831652712019091<br> | |
| 45648566923460348610454326648213393607260249141273<br> | |
| 72458700660631558817488152092096282925409171536436<br> | |
| 78925903600113305305488204665213841469519415116094<br> | |
| 33057270365759591953092186117381932611793105118548<br> | |
| 07446237996274956735188575272489122793818301194912<br> | |
| 98336733624406566430860213949463952247371907021798<br> | |
| 60943702770539217176293176752384674818467669405132<br> | |
| 00056812714526356082778577134275778960917363717872<br> | |
| 14684409012249534301465495853710507922796892589235<br> | |
| 42019956112129021960864034418159813629774771309960<br> | |
| 51870721134999999837297804995105973173281609631859<br> | |
| 50244594553469083026425223082533446850352619311881<br> | |
| 71010003137838752886587533208381420617177669147303<br> | |
| 59825349042875546873115956286388235378759375195778<br> | |
| 18577805321712268066130019278766111959092164201989<br> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ------------------------------------------------------------------------- | |
| 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; } } | |
| /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment