This pen show how to build a drawer menu with only HTML and CSS. Simple and clean.
A Pen by Mattia Astorino on CodePen.
<label for="DrawerMenuTrigger" class="OpenMenuButton">OPEN MENU</label> | |
<input type="checkbox" id="DrawerMenuTrigger" hidden> | |
<aside class="DrawerMenu"> | |
<div class="MenuContainer"> | |
<nav class="Menu"> | |
<h2 class="Menu__Title">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> | |
</div> | |
<label for="DrawerMenuTrigger" class="MenuOverlay"></label> | |
</aside> |
@use postcss-cssnext; | |
@custom-selector :--opened-menu #DrawerMenuTrigger:checked; | |
@custom-media --small (min-width: 30em); | |
.OpenMenuButton { | |
cursor: pointer; | |
font-size: 1.5rem; | |
font-weight: 900; | |
word-spacing: 140%; | |
letter-spacing: 4px; | |
} | |
.DrawerMenu { | |
position: fixed; | |
z-index: 99; | |
width: 100vw; | |
height: 100vh; | |
top: 0; | |
bottom: 0; | |
transform: translateX(-100%); | |
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1); | |
display: grid; | |
grid-template-areas: 'MENU OVERLAY'; | |
grid-template-columns: 15fr 5fr; | |
@media (--small) { | |
grid-template-columns: 5fr 10fr; | |
} | |
@nest :--opened-menu ~ & { | |
transform: none; | |
} | |
} | |
.MenuContainer { | |
contain: content; | |
grid-area: 'MENU'; | |
background-color: rebeccapurple; | |
box-sizing: border-box; | |
padding: 24px; | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
@media (--small) { | |
min-width: 400px; | |
} | |
} | |
.Menu { | |
display: flex; | |
flex-flow: column wrap; | |
transform: translateX(-30%); | |
opacity: 0; | |
transition: all 500ms cubic-bezier(0.4, 0.0, 0.2, 1); | |
transition-delay: 0; | |
@nest :--opened-menu ~ .DrawerMenu & { | |
transform: none; | |
opacity: 1; | |
transition-delay: 300ms; | |
} | |
& a { | |
text-decoration: none; | |
color: #FFFFFF80; | |
display: block; | |
padding: 16px 0; | |
&:hover { | |
color: #69F0AE; | |
} | |
} | |
& > * + * { | |
border-top: 1px solid rgba(255, 255, 255, 0.1); | |
} | |
} | |
.MenuOverlay { | |
display: block; | |
grid-area: 'OVERLAY'; | |
} | |
.Menu__Title { | |
color: #FFF; | |
font-size: 2rem; | |
margin-top: 0; | |
} |