Burger-Menü ICON-Wechsel

Daniiel721 · 26 April 2018

Hallo zusammen,

ich bräuchte mal wieder eure Hilfe.
Wie schon der Titel ein wenig verrät, würde ich gern das Menü-Zeichen ( was drei Striche sind III )bei aktiven Menü in ein Kreuz ( X )wechseln lassen. Was einem zum beenden des Menüs anzeigt.
Sonst funktioniert das Menü einwandfrei.

Vielen Dank im vorraus

Hier mal meine body

<div class="menu" >
<input id="open-menu" type="checkbox" style="display: none;"/>
<label for="open-menu"><img src="/Design/menu-icon-new.png"></label>
<ul id="menu-style">
<li style="padding-top: 100px;"><a href="#position-startseite">STARTSEITE</a></li>
<li><a href="#position-produkt">PRODUKT</a></li>
<li><a href="#position-kontakt">KONTAKT</a></li>
<li style="border: none;"><a href="#position-impressum">IMPRESSUM</a></li>
</ul>
</div>

Hier mein CSS

.menu {
width: 100%;
margin: 25px;
position: fixed;
top: -125px;
z-index: 2}
.menu img{position: absolute;
top: 125px;}
.menu input:checked ~ ul {
height: 2500px;
transition: all 0.5s ease-in-out;
background-color: rgba(0,0,0,0.9);}
.menu label {
cursor: pointer;}
.menu ul {
height: 0px;
margin: 0px;
overflow: hidden;
transition: all 0.5s ease-in-out;}

#menu-style {
list-style: none;
margin-top: 100px;
margin-left: -50px;
font-size: 50px;}
#menu-style li{
width: 70%;
margin: auto;
text-align: center;
border-bottom: solid;
border-color: #0d6397;
padding: 50 0 50 0;}

und hier noch den dazugehörigen Script

var links = document.querySelectorAll(".menu a");
for (var i = 0; i < links.length; i++) {
links.addEventListener("click", function () {
document.getElementById("open-menu").checked = false;
})
}

Daniiel721 · 27 April 2018

TOP! genau auf was ich hinaus war.
Würde dies auch mit einer Checkbox gehen?

Daniiel721 · 30 April 2018

Hi Sempervivum,

ich habe jetzt dein Entwurf verwendet und ein klein wenig modifiziert.
Aber ich habe das Problem, wenn ich Links hinterlege, springt die Homepage zwar auf die Sprungmarken aber das Menü bleibt erhalten. Hab ich ein Fehler drin oder fehlt mir noch etwas?
Oder soll ich mein alten Javascipt dafür wieder einsetzten?

CSS:

A:link {text-decoration: none; color: white;}
A:visited {text-decoration: none; color: white;}
A:active {text-decoration: none; color: white;}
A:hover {text-decoration: none; color: #0d6397;}

#background-label {background: black;
opacity: 0.5;
position: fixed;
top: 51px;
left: 37px;
width: 70px;
height: 70px;}

header {position: fixed;
width: 100%;
margin: -8px;}

header ul {list-style: none;
text-align: center;}

header li {width: 60%;
margin: auto;
padding: 50px;
border-width: 60%;
border-bottom-style: solid;
border-bottom-color: #0d6397;}

#overlay {background-color: black;
opacity: 0;
transition: opacity 1s;
width: 100%;
height: 2000px;
position: absolute;}

#nav-open {font-size: 50px;
position: absolute;
top: 50px;
left: 50px;
color: white;
cursor: pointer;
z-index: 1}

#nav-closed {font-size: 50px;
position: absolute;
top: 50px;
left: 50px;
color: white;
cursor: pointer;
opacity: 0;}

.nav-radio input{display: none;}

nav {width: 100%;
position: absolute;
top: 150px;
left: -100%;
transition: all 0.5s ease-in-out;}

#radio1:checked~nav {left: 0px;}

#radio1:checked~.responsive-label #nav-open {
transform: rotate(270deg);
transition: all 0.5s ease-in-out;
opacity: 0;
z-index: -1;}

#radio1:checked~label #overlay {
opacity: 0.8;}

#radio1:checked~label #nav-closed {
transform: rotate(270deg);
transition: all 0.5s ease-in-out;
opacity: 1;}

HTML:

<!doctype html>
<html>
<title>Hamburger2</title>
<head>
<meta charset="utf-8">
<link href="hamburger.css" rel="stylesheet">
<style>
</style></head>
<body>
<div id="background-label"></div>
<header class="nav-radio">
<input type="radio" name="radio" id="radio1">
<input type="radio" name="radio" id="radio2">
<input type="radio" name="radio" id="radio3">

<label for="radio3">
<div id="overlay"></div>
</label>

<label for="radio1" class="responsive-label">
<span id="nav-open">☰</span>
</label>

<label for="radio2" class="responsive-label">
<span id="nav-closed">✖</span>
</label>

<nav>
<ul>
<li style="padding-top: 0px;">
<a href="#position-startseite">STARTSEITE</a>
</li>
<li>
<a href="#position-produkt">PRODUKT</a>
</li>
<li>
<a href="#position-kontakt">KONTAKT</a>
</li>
<li style="border: none">
<a href="">IMPRESSUM</a>
</li>
</ul>
</nav>
</header>

</body></html>

scbawik · 30 April 2018

Sempervivum schrieb:
dass der Link den Klick abfängt und er nicht zum Label gelangt.

Ich glaube dem ist nicht mal so.
Aber ich würde es auch mit JS machen, damit ist man einfach flexibler.

Daniiel721 · 30 April 2018

Wie müsste ich ihn dann umschreiben? Hab schon mehrmals versucht klappt aber nicht

Daniiel721 · 30 April 2018

Mal vorab, ich habe keinen blassen Schimmer von JavaScript . mein jetziger Code wurde mir auch in diesem Forum geschrieben. ich habe versucht, mich daraus schlau zu machen, aber ich blicke da momentan noch nicht so ganz durch. Ich beschäftige mich noch jeden Tag mit CSS und lerne da noch jeden Tag was dazu. Erst wenn meine Homepage mit CSS fertig ist werde ich mich langsam dem JavaScript an nähern . Aber Zurück zum Thema.

Ich habe versucht das rot markierte durch die Eltern Elemente oder durch die klassenbezeichnungen zu ersetzen.
Zb. Des obere Mit Header a & nav a und des untere mit nav-closed. Ich bin da total planlos.

var links = document.querySelectorAll(".menu a");
for (var i = 0; i < links.length; i++) {
links.addEventListener("click", function () {
document.getElementById("open-menu").checked = false;
})
}

Daniiel721 · 1 Mai 2018

Vielen Dank. Da war ich echt gar nicht so verkehrt.

Nun habe ich des Bürger Menü auf meine Homepage eingefügt. Leider hat sich da ein neues Problem hervorgehoben.

Ich musste "Header" den Index 1 verpassen, weil sonst die Labels im Hintergrund waren und jetzt schiebt sich dein "Overlay" über alles andere. Es ist zwar unsichtbar, aber du kannst dahinter nichts mehr steuern.
Ich habe das Problem vorübergehend mit Display:none und Display:inline beim" Overlay" gelöst, aber hier geht halt dein schöner Einblend-Effekt flöten. Hast du ne Idee wie ich des noch lösen könnte? Kannst dir ja auch ein Bild von meiner Homepage machen-> www.danmos.de

Daniiel721 · 1 Mai 2018

Grandios ! nochmals vielen Dank für deine Unterstützung

Hoppi962 · 1 September 2022

Hallo, ich habe diesen Artikel über Google gefunden und hoffe, dass mir geholfen werden kann.
Ich bastele schon seit Stunden an einem Hamburger Menu, welches auch soweit funktioniert. Nur bekomme ich es nicht hin, dass beim öffnen des Menues die restliche Seite mit der Overlay Funktion abgedunkelt wird.

Hier mein verwendeter Code:

CSS:

#menubar {
display:none;
position: fixed;
background:#fff;
top:0;
left:0;
right:0;
z-index:998;
}

label.hamburg {
display: block;
cursor: pointer;
width: 75px; height: 50px;
position: relative;
margin:.5em 0 0 .5em;
border-radius: 4px;
}

input#hamburg {display:none}

.line {
position:absolute;
left:.5em;
height:4px;
width:55px;
background:#9a9a9a;
border-radius:2px;
display:block;
transition:.5s;
transform-origin:center;
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
transform: translateY(12px) rotate(-225deg);
width:40px;
background:#FF733C;
}

#hamburg:checked + .hamburg .line:nth-child(2){
opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
transform: translateY(-12px) rotate(225deg);
width:40px;
background:#FF733C;
}

#hamburg:checked + .hamburg .choose {
position:fixed;
top:4.5em;
left:0;
right:0;
max-height:800px;
max-width:340px;
transition:all .3s ease-in-out;
}

#overlay {
background-color:#000;
opacity:0;
transition: opacity 1s;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:5000;
}

#checkbox:checked~label #overlay {
opacity: 0.5;
}

.choose {
position:fixed;
background:#333;
border-radius:0 0 20px;
top:4.6em;
left:-340px;
right:0;
height:auto;
max-width:0;
overflow:hidden;
transition:all .3s ease-in-out;
}

.choose_btn {
display:block;
background:none;
color:#ddd;
font-weight:100;
cursor: pointer;
border:none;
border-radius:0 8px 8px;
padding:.9em 1em 1em 1em;
margin:1em;
text-align:left;
text-transform:none;
font-size:1em;
letter-spacing:.05em;
text-decoration:none;
transition:all .4s;
}

a.choose_btn:hover
{
width:auto;
background:#4F81BE;
color:#fff;
}

a.choose_btn_active
{
display:block;
background:#4F81BE;
color:#fff;
font-weight:100;
border:none;
border-radius:0 8px 8px;
padding:.9em;
margin:1em;
text-transform:none;
text-decoration:none;
font-size:1em;
line-height:1.5em;
cursor:none;
}

a.choose_btn_active:hover {
color:#fff;
}

HTML:

<div id="menubar">
<input type="checkbox" id="hamburg">
<label for="hamburg" class="hamburg">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="choose">
<a class="choose_btn" href="webdesign-owl.html">✶ Responsive WebDesign</a>
<a class="choose_btn" href="seo-suchmaschinenoptimierung.html">✶ Suchmaschinenoptimierung</a>
<a class="choose_btn" href="werbefotografie-business-portraits-produktfotos.html">✶ Businessfotografie</a>
<a class="choose_btn" href="was-kostet-eine-professionelle-website.html">✶ Fragen & Antworten</a>
<a class="choose_btn" href="formular.html">✶ Kontaktformular</a>
</div>
</label>
</div>

__________________________________________________________________________________________________________

Wo liegt mein Fehler?

Oliver77 · 1 September 2022

Hab mit Javscript was:

CSS:

.vis {
    opacity:0.5 !important;
}
#menubar {
    z-index:6000;
    background:transparent;
}
#overlay {
    pointer-events:none;
}

Javascript:

var toggle = true;
document.querySelector(".hamburg").addEventListener("click", opacity);
 function opacity() {
 if(toggle) {
    document.getElementById("overlay").classList.add("vis");
    toggle = false;
 }
 else {
    document.getElementById("overlay").classList.remove("vis");
    toggle = true;
     }
}

In jQuery:

Javascript:

$(".hamburg").click(function() {
  $("#overlay").toggleClass("vis");
});

Hoppi962 · 2 September 2022

Danke für die schnelle Antwort!
Kann ich mal probieren, allerdings wäre mir eine Lösung ohne JS lieber. Vielleicht gibt es da auch eine Lösung?

Nachtrag:
Habe deinen Vorschlag eben ausprobiert und leider hat das auch nicht funktioniert bzw. bringt keine Veränderung.

Ich hatte mal folgende Seite gefunden, die ich als Basis für meine Versuche verwendet habe:

Test

webentwicklung.ulrichbangert.de

Dort geht es auch ohne JS.

Oliver77 · 2 September 2022

Also ich hab's getestet und es hat funktioniert. Wie hast du das Javascript eingebunden?

Hoppi962 · 2 September 2022

In HTML:

<script>
var toggle = true;
document.querySelector(".hamburg").addEventListener("click", opacity);
function opacity() {
if(toggle) {
document.getElementById("overlay").classList.add("vis");
toggle = false;
}
else {
document.getElementById("overlay").classList.remove("vis");
toggle = true;
}
}
</script>

Im jquery.min.js eingefügt:

$(".hamburg").click(function() {
$("#overlay").toggleClass("vis");
});

Das jquery wird im header der Seite geladen.

Ich habe heute auch noch weitergetestet und meiner Ansicht nach kann der Fehler nur noch an folgendem CSS Code liegen:

#checkbox:checked~label #overlay {
opacity:.5;
}

#checkbox:not(:checked) ~ label #overlay {
pointer-events: none;
}

Oliver77 · 2 September 2022

Also, mit jQuery muss das

Javascript:

$( document ).ready(function() {
  
});

stehen und der Code da rein.
Das Javascript würde ich ich vor dem schließenden </body> packen und genau wo steht overlay?

Hoppi962 · 2 September 2022

Danke, das werde ich gleich ausprobieren.
Stimmt, hatte vergessen anzugeben dass ich <div id="overlay"></div> im body eingesetzt habe...

Und die Menubar hat bei weniger als 1300px Breite folgenden CSS Code:

#menubar {
display:block;
height:4.5em;
z-index:997;
box-shadow:0 0 7px #888;
}

Hoppi962 · 2 September 2022

@Sempervivum:

DAS HAT GEKLAPPT!!!!!
Ganz herzlichen Dank!

Und natürlich auch meinen Dank an Oliver77!

Hoppi962 · 2 September 2022

Bei aller Euphorie ist mir gerade aufgefallen, dass die Hamburger Lines jetzt nicht mehr rotieren und die Farbe wechseln - der Hambuger Button bleibt nach dem Klick unverändert. Was muss ich noch ändern?

HTML:

<div id="menubar">
<input type="checkbox" id="hamburg">
<div id="overlay"></div>
<label for="hamburg" class="hamburg">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="choose">
<a class="choose_btn" href="webdesign-owl.html">✶ Responsive WebDesign</a>
<a class="choose_btn" href="seo-suchmaschinenoptimierung.html">✶ Suchmaschinenoptimierung</a>
<a class="choose_btn" href="werbefotografie-business-portraits-produktfotos.html">✶ Businessfotografie</a>
<a class="choose_btn" href="was-kostet-eine-professionelle-website.html">✶ Fragen & Antworten</a>
<a class="choose_btn" href="formular.html">✶ Kontaktformular</a>
<a class="choose_btn" href="tonstudio-verkauf.html">✶ S A L E</a>
</div>
</label>
</div>

Das betreffende CSS:

.line {
position:absolute;
left:.5em;
height:4px;
width:55px;
background:#9a9a9a;
border-radius:2px;
display:block;
transition:.5s;
transform-origin:center;
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked+.hamburg .line:nth-child(1) {
transform: translateY(12px) rotate(-225deg);
width:40px;
background:#FF733C;
}

#hamburg:checked+.hamburg .line:nth-child(2) {
opacity:0;
}

#hamburg:checked+.hamburg .line:nth-child(3) {
transform: translateY(-12px) rotate(225deg);
width:40px;
background:#FF733C;
}

Hoppi962 · 2 September 2022

Danke dir - jetzt läuft alles!!!!

Im Übrigen habe ich das CSS noch ergänzt:

#hamburg:not(:checked)~#overlay {
pointer-events: none;
}

Ansonsten wären klickbare Elemente unter dem Overlay ohne Funktion.

Hoppi962 · 3 September 2022

Eine Sache stört mich immer noch.

Wenn ich einen Menupunkt angeklickt habe und die entsprechende Seite aufgerufen wurde, ist, wenn man die Zurück-Funktion des Browsers verwendet, das Menu noch offen. Kann es ohne JS realisiert werden, dass das Menu in dem Fall wieder geschlossen ist?

Nachtrag:
Hat sich erledigt! Ich habe es mit JS gelöst...

Burger-Menü ICON-Wechsel

Neues Mitglied

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied