CURTAIN MENU

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
    .menu-overlay {
	   height: 0%;
	   width:100%;
	   position: fixed;
	   z-index: 1;
	   left: 0;
	   top: 0;
	   background-color: rgb(0,0,0);
	   background-color: rgba(0,0,0,0.6);
	   overflow-x: hidden;
	   transition: 0.4s;
	}
	
	.menu-content {
	   position: relative;
	   top: 25%;
	   width: 100%;
	   text-align: center;
	   margin-top: 30px;
	}
	
	a {
	  padding: 8px;
	  text-decoration: none;
	  font-size: 30px;
	  color: white;
	  display: block;
	}
	
	a:hover, a:focus {
	   color: blue;
	}
	.overlay-menu .closebtn {
	   position: absolute;
	   top: 20px;
	   right: 45px;
	   font-size: 60px;
	}
	.closebtn {
	position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
    span {
	  font-size: 30px;
	  cursor: pointer;
	}
   
     
</style>
</head>
<body>
  <div id="myMenu" class="menu-overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">&times;</a>
	<div class="menu-content">
	  <a href="#"> Course </a>
	  <a href="#"> study Material</a>
	  <a href="#"> About us </a>
	</div>
  </div>
  <p> Click on menu to open navigation </p>
  <span onclick="openMenu()">Menu&#9776;</span>
<script>
	/* Open when someone clicks on the span element */
	function openMenu() {
	  document.getElementById("myMenu").style.height = "100%";
	}

	/* Close when someone clicks on the "x" symbol inside the overlay */
	function closeMenu() {
	  document.getElementById("myMenu").style.height = "0%";
	}
</script>
</body>
</html>