Web Development: Curtain Menu Tutorial

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>curtain Menu</title>
	<style>
	body{
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	background: url('back5.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-color: black;
	background-position: center;
	color: white;
	}

	.overlay{
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgb(207, 40, 40,0.9);
	overflow: hidden;
	transition: 0.5s;

	}

	.overlay a{
	padding: 8px;
	text-decoration: none;
	color: white;
	display: block;
	transition: 0.3s;
	}

	.overlay a:hover,.overlay a:focus{
	color: greenyellow;
	}

	.overlay-content{
	position: relative;
	top: 15%;
	width: 100%;
	text-align: center;
	margin-top: 30px;
	font-size: 30px;
	}

	.overlay .closeBtn{
	position: absolute;
	top: 2px;
	right: 10px;
	font-size: 50px;
	}
	</style>
	</head>
	<body>
	<div class="overlay" id="myNav">
	<a href="" class="closeBtn" onclick="closeBtn()">×</a>
	<div class="overlay-content">
	<a href="">About</a>
	<a href="">Services</a>
	<a href="">Clients</a>
	<a href="">Contact</a>
	</div>
	</div>

	<span style="cursor: pointer; font-size: 20px; font-weight: bold; padding: 20px;" onclick="openNav()">&#9776</span>
	<h2>Welcomet to sync Programming</h2>
	<p>Making a curtain menu</p>

	<script>
	function openNav(){
	document.getElementById('myNav').style.width = '100%'
	}

	function closeNav(){
	document.getElementById('myNav').style.width = '0%'
	}
	</script>
	</body>
	</html>

Web Development