Rollable Menu - Pure CSS

index.html

<header>

	<a href="#" class="club">Join the Club</a> 
	<a href="#" class="cate">Big Catering</a> 
	<a href="#" class="loca">Locations & Hours</a> 
	<a href="#" class="take">Takeout & Delivery</a> 

	<div class="parts">
		
		<input type="checkbox" id="switch" checked>
		<label for="switch">Menu</label>
		
		<div class="part">
			<span>Burgers</span> 
			<a href="#">Big Cheese</a>
			<a href="#">Big Veg</a>
			<a href="#">Double Big-Big</a>
			<a href="#">Big Boss</a>
			<a href="#">Little Big</a>
			<span>Burgers</span> 
			<div class="part">
				<span>Fries</span> 
				<a href="#">Classic Fries</a>
				<a href="#">Seasoned Fries</a>
				<a href="#">Curly Fries</a>
				<a href="#">Tater Tots</a>
				<span>Fries</span> 
				<div class="part">
					<span>Salads</span> 
					<a href="#">Big 'Burg</a>
					<a href="#">Big Caesar</a>
					<a href="#">Giant Garden</a>
					<a href="#">Black Forest</a>
					<span>Salads</span> 
					<div class="part">
						<span>Shakes</span> 
						<a href="#">Big Vanilla</a>
						<a href="#">Big Chocolate</a>
						<a href="#">Big Strawberry</a>
						<a href="#">Big Cookies & Creme</a>
						<span>Shakes</span> 
						<div class="part">
							<span>Sweet</span> 
							<a href="#">Ice Cream</a>
							<a href="#">Cheese Cake</a>
							<a href="#">Big Donut</a>
							<a href="#">Blueberry Jello</a>
							<span>Sweet</span> 
							
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>

</header>

rollable-menu-pure-css.markdown

Rollable Menu - Pure CSS

A Pen by Josetxu on CodePen.

License.

style.css

/* debugging the mobile view... */

:root {
	--hov: #ff2d2d;
}
	
*, *:before, *:after {
	box-sizing: border-box;
}

*:before, *:after {
	content: "";
	position: absolute;
}

@import url('https://fonts.googleapis.com/css2?family=Road+Rage&display=swap');


	
body {
    margin: 0;
    padding: 0;
    background: url(https://assets.codepen.io/t-1/lefteris-kallergis-_TLKIVSW6Do-unsplash.jpg) no-repeat center bottom;
    background-size: cover;
    font-family: 'Road Rage', Arial, Helvetica, serif;
    height: 100vh;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #121212;
	padding: 3vmin;
}

header > a {
    float: right;
    color: #fff;
    z-index: 222;
    position: absolute;
    right: 4vmin;
    font-size: 3vmin;
    text-decoration: none;
    margin-top: -0.5vh;
    right: 20vmin;
}

header > a:hover {
    color: var(--hov);
}

a.cate {
    margin-top: 3vmin;
}

a.take {	
    right: 4vmin;
}

a.loca {
    margin-top: 3vmin;
    right: 4vmin;
	display: flex;
    align-items: center;
    justify-content: center;
}

a.loca:before {
    content: "New York City \200A 12-5 \A Chicago \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \200A 6-12 \A San Francisco \200A 5-12 \A Los Angeles  \00a0 \00a0 \00a0 7-10 \A Philadelphia  \00a0 \00a0 \00a0 8-4 \A Toronto  \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 2-9 \A Vancouver  \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 7-2";
    position: absolute;
    top: 4vh;
    background: var(--hov);
    width: 100%;
    font-size: 2.5vmin;
    white-space: pre-wrap;
    padding: 0.7vmin;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: all 0.5s ease 0s;
	cursor: default;
	color: #000
}

a.loca:after {
    content: "";
    height: 0.25vmin;
    background: var(--hov);
    position: absolute;
    max-width: 0;
    bottom: -0.125vh;
    width: 100%;
    transition: all 0.5s ease 0s;
}

a.loca:hover:before {
    padding: 0.7vmin;
    max-height: 21vh;
    transition: all 0.5s ease 0s;
}

a.loca:hover:after {
    max-width: 30vmin;
    transition: all 0.5s ease 0s;
}




input#switch { display: none; }

label[for=switch] {
    width: 5vmin;
    height: 5vmin;
    position: absolute;
    z-index: 5;
    cursor: pointer;
    top: -8.5vmin;
    transition: all 0.5s ease 0s;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0.5vmin;
    color: #fff;
    font-size: 6vmin;
    text-indent: 18vmin;
}

label[for=switch]:hover {
    color: var(--hov);
}

label[for=switch]:before {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 1.52vh;
    font-size: 10vmin;
    content: " _ _ _ ";
    white-space: pre-wrap;
    top: -5.8vh;
    left: 1.5vmin;
}

input#switch:checked + label:before, 
input#switch:checked + label:after {
    border-width: 0.5vmin;
    transform: rotate(45deg);
    position: absolute;
    content: " _ ";
    line-height: 1.5vh;
    font-size: 10vmin;
    left: 3.75vmin;
    top: -2.75vh;
}

input#switch:checked + label:after {
    transform: rotate(-45deg);
    top: 5vh;
    left: -17.95vmin;
}








.parts {
	perspective: 100vmin;
    top: 9.2vh;
    position: relative;
}

.parts:before {
    background: #121212;
    width: calc(100% + 6vmin);
    height: 11.5vh;
    position: absolute;
    top: -12vmin;
    z-index: 1;
    left: -3vmin;
    content: "Bertie's Big Burgers";
    color: #fff;
    font-size: 9vmin;
    text-align: center;
    line-height: 11vh;
}


.part {
    background: #121212;
    transform-style: preserve-3d;
    height: 6vh;
    transform: rotateX(-180deg);
    color: #fff;
    font-size: 5.75vmin;
    transform-origin: center top;
    animation: close-menu 2s ease-in 0s;
    animation-fill-mode: forwards;
    transition: all 0.5s ease 0s;
    text-align: center;
}

input#switch:checked ~ .part, 
input#switch:checked ~ .part .part {
	animation: open-menu 3s ease 0s;
    animation-fill-mode: forwards;
	transition: all 0.5s ease 0s;
}

@keyframes open-menu {
	  0% { transform: rotateX(-180deg); }
	  1% { transform: rotateX(-90deg); }
	 30% { transform: rotateX(10deg); }
	 50% { transform: rotateX(-8deg); }
	 65% { transform: rotateX(5deg); }
	 75% { transform: rotateX(-3deg); }
	 85% { transform: rotateX(2deg); }
	 90% { transform: rotateX(-2deg); }
	 95% { transform: rotateX(0.5deg); }
	100% { transform: rotateX(0deg); }
}

@keyframes close-menu {
	  0% { transform: rotateX(0deg); }
	 99% { transform: rotateX(-90deg); }
	100% { transform: rotateX(-245deg); }
}





.part:before, .part:after {
    content: "";
    position: absolute;
    width: 2.5vmin;
    height: 0.5vmin;
    background: linear-gradient(90deg, transparent 0 35%, #00000036 37% 70%, #fff0 0 100%), repeating-linear-gradient(90deg, #fff0 0% 33%, #333 34% 36%), linear-gradient(180deg, #7d7d7d 0%, #fff 30%, #4a4a4a 70%);
    left: 15%;
    top: -0.35vmin;
    border-right: 0.25vmin solid #0008;
    border-radius: 1vmin;
    border-left: 0.25vmin solid #0008;
    transition: all 0.5s ease 0s;
}

.part:after {
    right: 15%;
    left: inherit;
}

.part a {
    font-size: 3.5vmin;
    text-decoration: none;
    margin: 0 2vmin;
    top: -1vmin;
    position: relative;
	color: #e17c57;
}

.part a:hover {
    color: #fff !important;
	box-shadow: 0 0 5vmin 3vmin #121212;
    text-shadow: -1vmin 0 0 #3338, -2vmin 0 0 #3334, -3vmin 0 0 #3332, 1vmin 0 0 #3338, 2vmin 0 0 #3334, 3vmin 0 0 #3332;
}

.part .part a {
	color: #fbcb39;
}

.part .part .part a {
	color: #cddc39;
}

.part .part .part .part a {
	color: #ff669a;
}

.part .part .part .part .part a {
	color: #ec7cff;
}

.part > span {
    font-size: 3.5vmin;
    padding: 0.5vmin 0.5vmin 0.5vmin 8.5vmin;
    top: 0.5vh;
    position: absolute;
    width: 17%;
    display: inline-block;
    text-shadow: 2vmin 0 0 #4448, 4vmin 0 0 #4446, 6vmin 0 0 #4444, 8vmin 0 0 #4442;
    left: 0vmin;
		text-align: left;
}

.part a + span {
    right: 0;
    position: absolute;
    text-shadow: -2vmin 0 0 #4448, -4vmin 0 0 #4446, -6vmin 0 0 #4444, -8vmin 0 0 #4442;
    padding: 0.5vmin 8.5vmin 0.5vmin 0.5vmin;
    text-align: right;
    left: inherit;	
		z-index: -1;
}

.part a + span:before, 
.part a + span:after {
    right: 2vmin;
    left: inherit !important;
}






/*** ICONS ***/
/* burger */
label + .part > span:before {
    content: "";
    position: absolute;
    left: 2vmin;
    width: 4vmin;
    border-top: 1vmin solid #fff;
    border-bottom: 1vmin solid #fff;
    height: 3vmin;
    border-radius: 1vmin;
    top: 1vmin;
    background: linear-gradient(90deg, #000 0 5%, #fff0 5% 95%, #000 0 100%), linear-gradient(0deg, #fff0 0 25%, #fff 25% 40%, #fff0 40% 60%, #fff 60% 77%, #fff0 77% 100%);
}

/* fries */
label + .part > .part > span:before, 
label + .part > .part > span:after {
    content: "";
    position: absolute;
    left: 2vmin;
    width: 4vmin;
    height: 0.75vmin;
    border-radius: 1vmin 0 1vmin 0;
    top: 2vmin;
    background: #fff;
    transform: rotate(-69deg);
}

label + .part > .part > span:after {
    transform: rotate(145deg);
    transform-origin: center bottom;
}

/* salads */
label + .part > .part > .part > span:before {
    content: "";
    position: absolute;
    left: 2vmin;
    width: 4vmin;
    height: 1.5vmin;
    border-radius: 0 0 10vmin 10vmin;
    top: 2.35vmin;
    background: #fff;
}

label + .part > .part > .part > span:after {
    content: "";
    position: absolute;
    left: 2vmin;
    width: 4vmin;
    height: 1.65vmin;
    border-radius: 1vmin;
    top: 0.5vmin;
    background: linear-gradient(45deg, #fff0 0 30%, #fff 30% 35%, #fff0 0 100%), linear-gradient(65deg, #fff0 0 30%, #fff 30% 35%, #fff0 0 100%);
}

/* shakes */
label + .part > .part > .part > .part > span:before {
    content: "";
    position: absolute;
    left: 2vmin;
    width: 2.5vmin;
    height: 0in;
    border: solid #121212;
    border-top: 2.5vmin solid white;
    top: 2vmin;
    border-radius: 0.15vmin;
}

label + .part > .part > .part > .part > span:after {
    content: "";
    position: absolute;
    left: 2.5vmin;
    width: 1.5vmin;
    height: 0.35vmin;
    border-radius: 1vmin;
    top: 1.5vmin;
    background: #fff;
    transform: rotate(101deg);
}

/* sweet */
label + .part > .part > .part > .part > .part > span:before {
    content: "";
    position: absolute;
    left: 2.5vmin;
    width: 2.25vmin;
    height: 1.75vmin;
    border-radius: 80%;
    top: 1.7vmin;
    background: #fff;
}

label + .part > .part > .part > .part > .part > span:after {
    content: "";
    position: absolute;
    left: 2.65vmin;
    width: 2vmin;
    height: 4vmin;
    top: 0.5vmin;
    transform: rotate(101deg);
    border: 1vmin solid white;
    border-color: #fff #fff0;
}


/*** PORTRAIT ***/

@media only screen and (orientation: portrait) {
	.parts:before {
		font-size: 9vmin;
    height: 10.1vh;
    line-height: 7.25vh;
    text-indent: -10vmin;
	}
	.part {
		text-align: left;
		text-indent: 18vmin;
	}
	.part > span {
		text-indent: -0.5vmin;
	}
	.part a + span {
		display: none;
	}
	.part:before, .part:after {
		display: none;
	}
	a.loca, a.club {
    margin-top: 6vmin;
	}
	a.cate, a.take {
    margin-top: 3vmin;
	}
}