Menu Vertical full Page CSS

Pure CSS Menu / Hamburger menu full page – Menu hamburguesa toda la pantalla vertical

BY Jason Tyler

HTML

<input id="test" type="checkbox" />
<label for="test">
<svg class="burger" width="86" height="60" viewbox="0 0 150 150">
<g stroke-width="12"> 
<line x1="6" y1="6" x2="80" y2="6"></line>
<line x1="6" y1="28" x2="80" y2="28"></line>
<line x1="6" y1="50" x2="80" y2="50"> </line>
</g>
</svg>
<svg class="close" width="86" height="60" viewbox="0 0 150 150">
<g stroke-width="12"> 
<line x1="42" y1="6" x2="42" y2="80"></line>
<line x1="6" y1="42" x2="80" y2="42"></line>
</g>
</svg>
</label>
<div class="menu">
<div>Home</div>
<div>About</div>
<div>Hello</div>
<div>Contact</div>
</div>

<span class="main">
<span>Pure CSS Menu</span>
</span>
CSS

body{background-color:#5B80AA}
label{position:absolute;z-index:1}
input{display:none}
input:checked~label{right:0}
.burger{position:relative;top:24px;cursor:pointer}
.burger g{stroke:#fff;transition:stroke .25s ease-in-out}
.burger g:hover{stroke:#ccc}
input:checked~label .burger{opacity:0}
.close{position:relative;top:24px;cursor:pointer;opacity:0}
.close g:hover{stroke:#ccc}
.close g{stroke:#fff;transition:stroke .25s ease-in-out}
.close line{-webkit-transform-origin:0;transform-origin:0}
.close g{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);-webkit-transform-origin:50%;transform-origin:50%}
input:checked~label .close{opacity:1}
.menu{display:flex;flex-direction:column;align-items:center;justify-content:space-around;position:absolute;opacity:0;width:100vw;height:100vh;background-color:tomato;transition:opacity .8s cubic-bezier(0.175,.885,.32,1.275);color:#fff;text-transform:uppercase;font-size:24px;font-weight:700;font-family:Arial,Helvetica,sans-serif}
input:checked~.menu{opacity:1}
.menu div{margin-top:50px;transition:margin .8s cubic-bezier(0.175,.885,.32,1.275)}
input:checked~.menu div{margin-top:0}
.main{display:flex;width:100vw;height:100vh}
.main span{margin:auto;font-size:40px;color:#fff;font-family:Pacifico,cursive}

FontAwesome CDN

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
¿Te gusto el post?
¡Compártelo!