Hilfe bei Burger-Menu

ego · 6. Februar 2019

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>

Alles anzeigen

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);
}

Alles anzeigen

basti1012 · 7. Februar 2019

erstens reicht es wenn man jquery einmal einbindet. Dann has du ein <div> was eigentlich geschlossen sein müßte.
Dann aber glaube ich das du was verwechselst. Dein Code macht ja nur den Icon von hamburger zum X . Deine Navigation bleibt so wie sie ist. Du wolltest bestimmt das sie beim klick auf den Hamburger veschwindet und wieder kommt oder ?

ego · 7. Februar 2019

Zitat von basti1012

erstens reicht es wenn man jquery einmal einbindet. Dann has du ein <div> was eigentlich geschlossen sein müßte.
Dann aber glaube ich das du was verwechselst. Dein Code macht ja nur den Icon von hamburger zum X . Deine Navigation bleibt so wie sie ist. Du wolltest bestimmt das sie beim klick auf den Hamburger veschwindet und wieder kommt oder ?

Hallo, danke erstmal für die Antwort, ja ich wollte das die Nav. beim klick aus und wieder einfährt..
wie mach ich das am besten? Wo müsste ich was ändern?

Cipha · 7. Februar 2019

Setze #menu auf display:none;
und blende es mittels jQuery wieder ein

Code

$('.deinHamburgerIcon').click(function(){
$('#menu').slideToggle();
})

ego · 7. Februar 2019

Zitat von Cipha

Setze #menu auf display:none;
und blende es mittels jQuery wieder ein

Code

$('.deinHamburgerIcon').click(function(){

$('#menu').slideToggle();

})

Danke dir.. muss ich den Code irgendwo einsetzen oder ersetzen?
Heißt das jetzt das ich jQuery umschreiben muss?

ego · 7. Februar 2019

Zitat von ego

Danke dir.. muss ich den Code irgendwo einsetzen oder ersetzen?
Heißt das jetzt das ich jQuery umschreiben muss?

ok habs jetzt hinbekommen, danke nochmals.
Das 2. Problem ist auf der Seite ist alle in der Mitte eingeordnet seit dem ich das Burger Menu eingebaut habe. Sieht hier jemand den Fehler bei CSS irgendwo?

ego · 7. Februar 2019

So sieht die Website mitlerweile aus:

HTML-Code:

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 type="text/javascript">
$(document).ready(function(){
$('.icon').click(function(){
$('.icon').toggleClass('active');
$('#menu').slideToggle();
})
})
</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>
<p id="menu">
<a href="index.html">HOME</a>
<a href="dienstleistungen.html">DIENSTLEISTUNGEN</a>
<a href="gallery.html">GALLERY</a>
<a href="https://connect.shore.com/widget/david-schramm-hair-make-up-art">ONLINE TERMIN/PREISE</a></li>
<a href="uber.html">ÜBER MICH</a>
</p>
</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>

Alles anzeigen

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 type="text/javascript">
$(document).ready(function(){
$('.icon').click(function(){
$('.icon').toggleClass('active');
$('#menu').slideToggle();
})
})
</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>
<p id="menu">
<a href="index.html">HOME</a>
<a href="dienstleistungen.html">DIENSTLEISTUNGEN</a>
<a href="gallery.html">GALLERY</a>
<a href="https://connect.shore.com/widget/david-schramm-hair-make-up-art">ONLINE TERMIN/PREISE</a></li>
<a href="uber.html">ÜBER MICH</a>
</p>
</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>

Alles anzeigen

Jetzt möchte ich das Burger Menu rechts haben und auf dem oberen Rahmen wie die verlinkungen.
Wie müsste dies jetzt bei CSS aussehen bzw. müsste ich noch was bei html ändern?

Gastl · 7. Februar 2019

Zitat von ego

Das 2. Problem ist auf der Seite ist alle in der Mitte eingeordnet seit dem ich das Burger Menu eingebaut habe. Sieht hier jemand den Fehler bei CSS irgendwo?

Poste mal den Onlinelink zur Seite. Ich denke, es wird sich niemand die Arbeit machen, selber Dateien aus deinem Code zu erstellen.

ego · 7. Februar 2019

http://haarkunst.bplaced.net/

die png Datei kann man komischerweise auch nicht sehen. Weiss einer wieso?

Gastl · 7. Februar 2019

Groß-/Kleinschreibung ist der häufigste Fehler. Zweithäufigst wohl, Datei nicht hochgeladen.

ego · 7. Februar 2019

Zitat von Gastl

Groß-/Kleinschreibung ist der häufigste Fehler. Zweithäufigst wohl, Datei nicht hochgeladen.

habe alles richtig geschrieben im offline browser zeigt es an aber sobald ich es hochlade geht nix..

Cipha · 8. Februar 2019

Stimmt die Ordnerstruktur denn online überein? Liegt der ordner "bilder" auf der gleichen Ebene wie die index.html? So gibst du es hier an.

- - - Aktualisiert - - -

Dein Content hängt übrigens mittig weil du div.wrapper margin: 0 auto (= zentriert in der breite) mitgibst.

basti1012 · 9. Februar 2019

hast du nicht richtig geschrieben. Ändere dein Link mal im Code
von diesen
http://haarkunst.bplaced.net/bilder/Logo2.png
in diesen um
http://haarkunst.bplaced.net/bilder/Logo2.PNG

Dann siehst du auch schon was falsch ist. Du hast ja zur Zeit nur 2 Bilder drinne. Achte beim nächsten mal auf richtige schreibweise. Auch klein und groß schrift muss beachtet werden. Aber wurde ja schon gesagt

Bandit · 9. Februar 2019

Zitat von ego

habe alles richtig geschrieben im offline browser zeigt es an aber sobald ich es hochlade geht nix..

Zur Erklärung:
Auf Windows-Maschinen ist Logo2.png identisch mit logo2.PNG, auf Unix/Linux-Maschinen (das sind die meisten Webserver) sind das zwei unterschiedliche Dateinamen. Halte dich einfach an diese Regel:

Alle Dateinamen in Kleinbuchstaben, keine Umlaute, keine Leer- und Sonderzeichen, dann entstehen solche Problem nicht.

Tags