Untitled

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				font-family: sans-serif;
			}
			h2 {
				font-size: 2em;
				margin-bottom: 0;
			}
	/* Menuleiste */
			ul {
				padding: 0;
				list-style-type: none;
				max-width: 800px;
			}
			li {
				display: inline-block;
				width:25%;
				text-align: center;
				height: 30px;
				line-height: 30px;
			}
			a {
				color: white;
				text-decoration: none;
			}

	/* Farben der Menuleiste */
			#ver1 ul{
				background: darkred;
			}
			#ver1 li:hover {
				background: red;
			}

			#ver2 ul{
				background: darkblue;
			}
			#ver2 li:hover {
				background: blue;
			}
	/* Menuschalter */
			.hamburger {
				display: none;
				position: relative;
				width: 96px;
				height:96px;
				margin: 0;
				padding:0;
				font-size: 0;
				text-indent: -99999px;
				cursor: pointer;
			}
			.hamburger span {
				display: block;
				position: absolute;
				top: 44px;
				left: 18px;
				right: 18px;
				height: 8px;
				background: white;
				transition: all 300ms;
			}

			.hamburger span::before,
			.hamburger span::after {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				left: 0px;
				height: 8px;
				background: white;
			}
			.hamburger span::before {
				top: -20px;
			}
			.hamburger span::after {
				bottom: -20px;
			}
			#ver1check,
			#ver2check {
				display: none;
			}

	/* Farben der Menuschalters */
			#ver1 .hamburger {
				background: darkred;
			}
			#ver2 .hamburger {
				background: darkblue;
			}

   /* Funktionalität & Animation */
			@media (max-width: 600px) {
				li {
					display: none;
					height: 60px;
					line-height: 60px;
					font-size: 2em;
					width: 100%
					}

				.hamburger {
					display: block;
				}

				#ver1check:checked ~ ul li {
					display: block;
				}
				#ver1check:checked ~ label .hamburger {
					background: red;
				}
				#ver1check:checked ~ label .hamburger span {
					transform: rotate(90deg);
				}

				#ver2 label .hamburger span {
					transition: background 0s 300ms;
				}
				#ver2 label .hamburger span::before,
				#ver2 label .hamburger span::after{
					transition: top 300ms 300ms, bottom 300ms 300ms, transform 300ms 0ms;
				}

				#ver2check:checked ~ ul li {
					display: block;
				}
				#ver2check:checked ~ label .hamburger {
					background: blue;
				}
				#ver2check:checked ~ label .hamburger span {
					background: none;
				}
				#ver2check:checked ~ label .hamburger span::before {
					top:0;
					transform: rotate(45deg);
					transition: top 300ms 0ms, transform 300ms 300ms;
				}
				#ver2check:checked ~ label .hamburger span::after {
					bottom:0;
					transform: rotate(-45deg);
					transition: bottom 300ms 0ms, transform 300ms 300ms;
				}

			}


		</style>
	</head>
	<body>
		<h2>Menu 1 Test</h2>
		<nav id="ver1">
			<input type="checkbox" id="ver1check">
			<label for="ver1check">
				<span class="hamburger">
					<span>toggle menu</span>
				</span>
			</label>
			<ul>
				<li><a href="#">Menupunkt 1</a>
				<li><a href="#">Menupunkt 2</a>
				<li><a href="#">Menupunkt 3</a>
				<li><a href="#">Menupunkt 4</a>
			</ul>
		</nav>
		<h2>Menu 2 Test</h2>
		<nav id="ver2">
			<input type="checkbox" id="ver2check">
			<label for="ver2check">
				<span class="hamburger">
					<span>toggle menu</span>
				</span>
			</label>
			<ul>
				<li><a href="#">Menupunkt 1</a>
				<li><a href="#">Menupunkt 2</a>
				<li><a href="#">Menupunkt 3</a>
				<li><a href="#">Menupunkt 4</a>
			</ul>
		</nav>
	</body>
</html>