Menu #6

<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>

label {
    position: absolute;
    z-index: 1;
}

input {
    display: none;
}

input:checked ~ label {
    right: 0;
}

.burger {
    position: fixed;
    top: 2rem;
    left: 2rem;
    cursor: pointer;
}

.burger g {
    stroke: #ffffff;
    -webkit-transition: stroke 0.25s ease-in-out;
    -o-transition: stroke 0.25s ease-in-out;
    -moz-transition: stroke 0.25s ease-in-out;
    transition: stroke 0.25s ease-in-out;
}

.burger g:hover {
    stroke: #cccccc;
}

input:checked ~ label .burger {
    opacity: 0;
}

.close {
    position: fixed;
    top: 2rem;
    left: 2rem;
    cursor: pointer;
    opacity: 0;
}

.close g:hover {
    stroke: #cccccc;
}

.close g {
    stroke: #ffffff;
    -webkit-transition: stroke 0.25s ease-in-out;
    -o-transition: stroke 0.25s ease-in-out;
    -moz-transition: stroke 0.25s ease-in-out;
    transition: stroke 0.25s ease-in-out;
}

.close line {
    -webkit-transform-origin: 0%;
    -moz-transform-origin: 0%;
    -o-transform-origin: 0%;
    transform-origin: 0%;
}

.close g {
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
}

input:checked ~ label .close {
    opacity: 1;
}

.menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    position: absolute;
    opacity: 0;
    width: 100vw;
    height: 100vh;
    background-color: tomato;
    -webkit-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

input:checked ~ .menu {
    opacity: 1;
}

.menu div {
    margin-top: 50px;
    -webkit-transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

input:checked ~ .menu div {
    margin-top: 0px;
}

.main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    width: 100vw;
    height: 100vh;
}

.main span {
    margin: auto;
    font-size: 40px;
    color: #ffffff;
    font-family: "Pacifico", cursive;
}