<div class="frame">
  <div class="center">
		<div id="trigger" onclick="box_event('appear')"></div>
		<div id="box">
			<ul id="text">
				<li onclick="box_event('disappear')">Home</li>
				<li onclick="box_event('disappear')">Work</li>
				<li onclick="box_event('disappear')">Life</li>
				<li onclick="box_event('disappear')">Spirit</li>
			</ul>
		</div>
  </div>
</div>
@color-background: #4a627a;
@color-font: #ffffff;
@color-font-lighten: #cccccc;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: @color-background;
  color: @color-font;
	font-size: 14px;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#trigger {
	z-index: 50;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	width: 80px; height: 80px;
	background-color: transparent;
	cursor: pointer;
}

#box {
	border-top: 3px solid @color-font;
	border-bottom: 3px solid @color-font;
	width: 40px;
	height: 10px;
	&.animation-reveal {
		animation: lines 1s linear forwards;
		#text {
			animation: appear 0.4s 0.6s linear forwards;
		}
	}
	&.animation-disappear {
		animation: lines 1s reverse linear forwards;
		ul {
			animation: appear 0.4s reverse linear forwards;
		}
	}
	ul {
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%,-50%);
		list-style: none;
		width: 300px;
		margin: 0; padding: 0;
		text-align: center;
		opacity: 0;
		li {
			display: inline-block;
			margin: 0px 15px;
			font-weight: 600;
			cursor: pointer;
			text-transform: uppercase;
			color: @color-font;
			&:hover {
				color: @color-font-lighten;
			}
		}
	}
}

@keyframes lines {
	0% {
		width: 40px;
		height: 10px;
	}
	40% {
		width: 50px;
		height: 50px;
	}
	60% {
		width: 50px;
		height: 50px;
	}
	100% {	
		width: 280px;
		height: 50px; 
	}
}

@keyframes appear {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
View Compiled
function box_event(action) {
	let box = document.getElementById("box");
	let trigger = document.getElementById("trigger");
	if(action == "appear") {
		trigger.style.display = "none";
		box.classList.remove("animation-reveal");
		box.classList.remove("animation-disappear");	
		setTimeout(function(){ 
			box.classList.add("animation-reveal");
		}, 10);
	} 
	if(action == "disappear") {
		trigger.style.display = "block";
		box.classList.remove("animation-disappear");	
		box.classList.remove("animation-reveal");
		setTimeout(function(){ 
			box.classList.add("animation-disappear");
		}, 10);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://100dayscss.com/codepen/js/jquery.min.js