<!DOCTYPE html>
<html lang="de">
<head>
<title>Hamburger</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
background-color: black;
margin: 0;
padding: 0;
font-family: "Maven Pro" !important;
width: 100%;
max-width:1920px;
}
*{
margin:0;
padding:0;
}
.Logos >*{
padding: 10px;
}
#AKA {
width: 23%;
margin-left: 10px;
}
#AI {
width: 23%;
margin-right: 10px;
float: right;
}
#Bild ,#Hauptbild{
width:100%;
display: block;
height:200px;
}
h1 {
color: #242424;
position: relative;
bottom: 80px;
font-size: 2.4em;
margin-right:22px;
text-align:right;
}
nav ,.auf{
display:block;
}
nav,ul{
display:flex;
width:100%;
}
nav ul li {
flex:1;
margin-left: 0px;
border:1px solid red;
opacity: 0.5;
}
nav ul li:hover {
opacity: 1;
}
li {
list-style: none;
}
a {
display: block;
width:100%;
padding-top:9px;
text-decoration:none;
color: white;
font-size:1em;
height: 30px;
}
.gruen {
border-left: #C1DE1D 45px solid;
}
.hellblau {
border-left: #00FFC6 45px solid;
}
.tuerkis {
border-left: #00C3FF 45px solid;
}
.blau {
border-left: #0000FF 45px solid;
}
.lila {
border-left: #8903FF 45px solid;
}
.pink {
border-left: #FF007E 45px solid;
}
.rot {
border-left: #FF0000 45px solid;
}
.orange {
border-left: #F79300 45px solid;
}
.gelb {
border-left: #FFFF00 45px solid;
}
section {
display: block;
width: 50%;
text-align:center;
margin: 200px auto;
color: white;
height:640px;
}
p {
border-left: #C1DE1D 4px solid;
border-right: white 1px solid;
padding-left: 1em;
font-size:1.4em;
height:100%;
}
#hamicon{
display:none;
}
@media only screen and (max-width:980px) {
h1 {
color:#242424;
text-align: center;
font-size: 1.8em;
width:100%;
}
#hamicon{
display:block;
width:80px;
height:80px;
display:block;
opacity:0.5;
cursor:pointer;
transition:opacity 1500ms;
}
#hamicon>.eins,.zwei,.drei{
width:100%;
height:15px;
border-radius:5px;
display:block;
margin-bottom:10px;
background:red;
}
.einsauf{
transform-origin:0% 100%;
transform:rotate(-20deg);
transition:all 1000ms;
}
.einszu{
transform-origin:0% 100%;
transform:rotate(0deg);
transition:all 1000ms;
}
.eins{
background:red;
}
.zwei{
background:blue;
}
.drei{
background:yellow;
}
#hamicon:hover {
opacity: 1;
transition:opacity 1500ms;
}
.weg{
display:none;
}
.da{
display:block;
}
nav{
display:none;
}
nav,ul{
width:70%;
margin:0 auto;
height: 650px;
display:flex;
flex-direction:column;
}
nav li{
margin-bottom:30px;
text-align:center;
}
nav a {
text-align: center;
font-size: 1.2em;
height: 35px;
padding: 0.5em;
}
.gruen {
border: #C1DE1D 3px solid;
}
.hellblau {
border: #00FFC6 3px solid;
}
.tuerkis {
border: #00C3FF 3px solid;
}
.blau {
border: #0000FF 3px solid;
}
.lila {
border: #8903FF 3px solid;
}
.pink {
border: #FF007E 3px solid;
}
.rot {
border: #FF0000 3px solid;
}
.orange {
border:orange 3px solid;
}
.gelb {
border: #FFFF00 3px solid;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>
<div class="Logos">
<img id="AKA" src="https://www.html-seminar.de/forum/ws/attachment/1627-logo1-png/">
<img id="AI" src="https://www.html-seminar.de/forum/ws/attachment/1626-logo2-png/">
</div>
<div class="Hauptbild">
<img id="Bild" src="https://www.html-seminar.de/forum/ws/attachment/1624-001-png/">
<h1>Headline</h1>
</div>
<div id="nav-menue">
<div id="hamicon">
<div class="ham1 eins"></div>
<div class="ham1 zwei"></div>
<div class="ham1 drei"></div>
</div>
<nav class="zu weg">
<ul>
<li class="gruen"><a href="01.html">01</a></li>
<li class="hellblau"><a href="02.html">02</a></li>
<li class="tuerkis"><a href="03.html">03</a></li>
<li class="blau"><a href="04.html">04</a></li>
<li class="lila"><a href="05.html">05</a></li>
<li class="pink"><a href="06.html">06</a></li>
<li class="rot"><a href="07.html">07</a></li>
<li class="orange"><a href="08.html">08</a></li>
<li class="gelb"><a href="09.html">09</a></li>
</ul>
</nav>
</div>
</header>
<section>
<div>
<h2>Test</h2>
<p>
fff<br>
fff<br>
zzz<br>
zzzz<br>
eeeee<br>
fffff
</p>
</div>
</section>
<script>
$('#hamicon').click(function(){
ff=$('.eins').hasClass('einszu');
if(ff==true){
$('.eins').removeClass('einszu');
$('.eins').addClass('einsauf');
$('nav').removeClass('weg');
$('nav').addClass('da');
}else{
$('.eins').removeClass('einsauf');
$('.eins').addClass('einszu');
$('nav').removeClass('da');
$('nav').addClass('weg');
}
})
</script>
</body>
</html>