PriymakVl
3/4/2020 - 12:13 PM

css burger template

css burger template

burger.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Burger</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<style type="text/css">
.menu {
	width: 300px;
	height: 40px;
	margin: 50px auto;
	background: #000;
	display: flex;
}

.burger {
	margin: auto;
	position: relative;
	width: 30px;
	height: 20px;
}

.burger:hover {
	cursor: pointer;
}

.burger:before,
.burger:after {
	content: '';
	background-color: #fff;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	transition: transform .2s linear;
}

.burger:before {
	top: 0;
}

.burger:after {
	bottom: 0;
}

.burger span {
	position: absolute;
	left: 0;
	top: 10px;
	width: 100%;
	height: 2px;
	background: #fff;
	transition: transform .6s linear;
}

.burger.active:before {
	transform: rotate(45deg);
	top: 9px;
}

.burger.active:after {
	transform: rotate(-45deg);
	bottom: 9px;
}

.burger.active span {
	transform: scale(0);
}
</style>
	
<div class="menu">
	<div class="burger" onclick="classList.toggle('active');">
		<span></span>
	</div>
</div>

</body>
</html>