Hallo Leute kann mir einer bitte helfen?
Habe probiert ein Burger Menü zu erstellen doch irgendwas passt da nicht oder fehlt mir noch.
HTML
<!DOCTYPE html>
<html>
<head>
<title>H.b.F.</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.icon').click(function(){
$('.icon').toggleClass('active');
})
})
</script>
</head>
<body>
<div class="icon">
<div class="hamburger"></div>
<div id="navigation">
<div class="wrapper">
<div id="logo">
<p>H.b.F.</p>
</div>
<ul id="menu">
<li><a href="index.html">HOME</a></li>
<li><a href="dienstleistungen.html">DIENSTLEISTUNGEN</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="https://connect.shore.com/widget/david-schramm-hair-make-up-art">ONLINE TERMIN/PREISE</a></li>
<li><a href="uber.html">ÜBER MICH</a></li>
</ul>
</div>
</div>
<div id="banner">
<h1><img src="bilder/Logo2.png" width=800 height=350></h1>
</div>
<div id="content">
<div class="wrapper">
<p>
Perfekt geschnitten bis zu den Haarspitzen.
Hier bekommen Sie die beste Behandlung für Ihr Haar.
Egal ob eine neue Frisur oder eine neue
Haarfarbe, bei mir werden Sie sehr gut beraten.
Schauen Sie sich gerne meine Arbeit unter "Gallery" an.
Gerne überzeugen Sie sich persönlich und
machen gleich einen Termin.
</p>
<div>
</div>
</body>
</html>Code
* {
margin: 0;
padding: 0;
font-family: Levenim MT;
}
.wrapper {
width: 960px;
max-width: 90%;
margin: 0 auto;
}
#navigation {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
height: 100px;
background-color: rgba(250, 250, 250, 0.8)
}
#logo {
width: 60px;
height: 60px;
float: left;
margin: 20px;
}
#logo p {
font-family: Curlz MT;
font-size: 3em;
line-height: 1,5;
color: #274e71;
}
#menu {
float: right;
margin-top: 44px;
margin-right: 30px;
}
#menu a {
padding-right: 30px;
padding-top: 35px;
text-decoration: none;
color: #274e71;
font-weight: 700;
}
#menu a:hover {
border-top: solid white 5px;
}
#banner {
width: 100%;
height: 700px;
z-index: 0;
background: url(bilder/Hintergrund2.jpg);
background-size: cover;
}
#banner h1 {
padding-top: 250px;
text-align: center;
color: #274e71;
font-size: 6em;
font-family: Curlz MT;
}
#content {
margin-top: 50px;
}
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80px;
height: 80px;
cursor: pointer;
background: #000;
}
.hamburger {
width: 50px;
height: 6px;
background: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
transition: .5s;
}
.hamburger:before,
.hamburger:after
{
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #000000;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
transition: .5s;
}
.hamburger:before {
top: -16px;
}
.hamburger:after {
top: 16px;
}
.icon.active .hamburger {
background: rgba(0,0,0,0);
box-shadow: 0 2px 5px rgba(0,0,0,0);
}
.icon.active .hamburger:before {
top: 0;
transform: rotate(45deg);
}
.icon.active .hamburger:after {
top: 0;
transform: rotate(135deg);
}
