JS animation

by hannahtaylor

HTML

<div id="hamburger" >
	<span id="bars" onclick="dropdownMenu()">&#9776</span>
</div>
<div id="dropdown">
	<span id="close" onclick="closeMenu()">X</span>
	<ul>
		<li>Home</li>
		<li>About</li>
		<li>Contact</li>
		<li>Blog</li>
	</ul>
</div>

CSS

body {
	margin: 0px;
}

#dropdown {
color: white;
font-family: arial, sans-serif;
width: 300px;
background-color: #263d42;
padding-top: 10px;
height: 225px;
display: none;
opacity: 0.75;
}

#dropdown ul {
	list-style-type: none;
}

#dropdown li {
	padding: 10px 0px 10px 5px;
	cursor: pointer;
	background-color: #263d42;
}

#dropdown li:hover {
	color: #63c7b2;
}

@keyframes smoothMenu{
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes smoothClose {
	from { opacity: 0; }
	to { opacity: 1; }
}

#close {
	color: #ccdbdc;
	padding: 10px 0px 0px 15px;
	font-size: 1.25em;
	cursor: pointer;
}

#hamburger {
	background-color: #263d42;
	font-size: 2em;
	color: #ccdbdc;
	width: 290px;
	padding-left: 10px;
	cursor: pointer;
}

JavaScript

function dropdownMenu() {
	var menu = document.getElementById("dropdown");
	var bars = document.getElementById("bars");
	menu.style.display = "block";
	menu.style.animation = "smoothMenu 0.5s linear 0s 1";
	bars.style.display = "none";
}

function closeMenu() {
	var menu = document.getElementById("dropdown");
	var bars = document.getElementById("bars");
	menu.style.display = "none";
	bars.style.display = "block";
	bars.style.animation = "smoothClose 0.5s linear 0s 1";
}