Menu #3

<label for="menu-opener" tabindex="0" aria-haspopup="true" role="button" aria-controls="menu" class="OpenMenuButton" id="openmenu">OPEN MENU</label>

<input type="checkbox" data-menu id="menu-opener" hidden />
<aside class="DrawerMenu" role="menu" id="menu" aria-labelledby="openmenu">
    <nav class="Menu">
        <h2>Some Site</h2>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 01</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 02</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 03</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 04</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 05</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 06</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 07</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 08</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 09</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 10</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 11</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 12</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 13</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 14</a>
        <a role="menuitem" tabindex="-1" href="#">Menu Item 15</a>
    </nav>
    <label for="menu-opener" class="MenuOverlay"></label>
</aside>

.OpenMenuButton {
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 900;
    word-spacing: 140%;
    letter-spacing: 4px;
    color: white;
}

.DrawerMenu {
    position: fixed;
    z-index: 99;
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: -o-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: -ms-grid;
    display: grid;
    grid-template-areas: "MENU OVERLAY";
    -ms-grid-columns: 15fr 5fr;
    grid-template-columns: 15fr 5fr;
}

@media (min-width: 30em) {
    .DrawerMenu {
        -ms-grid-columns: auto 1fr;
        grid-template-columns: auto 1fr;
    }
}

[data-menu]:checked ~ .DrawerMenu {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
}

.Menu {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column wrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column wrap;
    -webkit-transform: translateX(-30%);
    -moz-transform: translateX(-30%);
    -o-transform: translateX(-30%);
    transform: translateX(-30%);
    opacity: 0;
    color: #fff;
    -webkit-transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-delay: 0;
    -moz-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
    contain: content;
    grid-area: "MENU";
    background-color: rebeccapurple;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    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 {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1;
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}

.Menu a {
    text-decoration: none;
    color: #ffffff80;
    display: block;
    padding: 16px 0;
}

.Menu a:hover {
    color: #69f0ae;
}

.Menu > * + * {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.MenuOverlay {
    display: block;
    grid-area: "OVERLAY";
}

[data-menu]:not(:checked) ~ .DrawerMenu .MenuOverlay {
    pointer-events: none;
}