Responsives Hamburgermenü

PHP-Code:
<!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>