Ich habe mal dein Code genommen und ein fast neuen rausgemacht, mit dem Ziel deine Vorlage einzuhalten.
Hier ist das Ergebnis,und sag mal Bescheid ob du noch was geändert haben willst
Dazu der komplette Code
Jo ich warte dann mal auf Feedback von dir
Hier ist das Ergebnis,und sag mal Bescheid ob du noch was geändert haben willst
Dazu der komplette Code
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>