Vertical Menu with overlay only Css

Pure CSS Drawer Menu with overlay / Menu Vertical deslizante con Css

By Mattia Astorino

HTML

<label for="menu-opener" class="OpenMenuButton">OPEN MENU</label>
<input type="checkbox" data-menu="DrawerMenu" id="menu-opener" hidden>
<aside class="DrawerMenu">
<nav class="Menu">
 <h2>Awesome CSS Menu</h2>
 <a href="#">Menu Item 01</a>
 <a href="#">Menu Item 02</a>
 <a href="#">Menu Item 03</a>
 <a href="#">Menu Item 04</a>
 <a href="#">Menu Item 05</a>
 <a href="#">Menu Item 06</a>
 <a href="#">Menu Item 07</a>
 <a href="#">Menu Item 08</a>
 <a href="#">Menu Item 09</a>
 <a href="#">Menu Item 10</a>
 <a href="#">Menu Item 11</a>
 <a href="#">Menu Item 12</a>
 <a href="#">Menu Item 13</a>
 <a href="#">Menu Item 14</a>
 <a href="#">Menu Item 15</a>
</nav>
<label for="menu-opener" class="MenuOverlay"></label>
</aside>
CSS

body{margin:0}
.OpenMenuButton{cursor:pointer;font-size:1.5rem;font-weight:900;word-spacing:140%;letter-spacing:4px;display:flex;justify-content:center;margin-top:20%}
.DrawerMenu{position:fixed;z-index:99;width:100vw;height:100vh;top:0;bottom:0;transform:translateX(-100%);transition:transform .5s cubic-bezier(0.4,0,.2,1);display:grid;grid-template-areas:'MENU OVERLAY';grid-template-columns:15fr 5fr}
@media (min-width:30em){.DrawerMenu{grid-template-columns:2fr 10fr}}
[data-menu]:checked~.DrawerMenu{transform:none}
.Menu{display:block;flex-flow:column wrap;transform:translateX(-30%);opacity:0;color:#fff;transition:all 500ms cubic-bezier(0.4,0,.2,1);transition-delay:0;contain:content;grid-area:'MENU';background-color:rebeccapurple;box-sizing:border-box;padding:24px;overflow:auto;-webkit-overflow-scrolling:touch}
@media (min-width:30em){.Menu{min-width:400px}}
[data-menu]:checked~.DrawerMenu .Menu{transform:none;opacity:1;transition-delay:300ms}
.Menu a{text-decoration:none;color:rgba(255,255,255,.50196);display:block;padding:16px 0}
.Menu a:hover{color:#69F0AE}
.Menu>*+*{border-top:1px solid rgba(255,255,255,.1)}
.MenuOverlay{display:block;grid-area:'OVERLAY'}
[data-menu]:not(:checked)~.DrawerMenu .MenuOverlay{pointer-events:none}
¿Te gusto el post?
¡Compártelo!