[erledigt] Script Hamburger zu X Button

[schriftsteller-stefansen]

Servus

Mein Ziel ist, daß beim Klick auf das Hamburgersymbol das Symbol zu einem X wird.
Das klappt auch soweit.

Das Problem ist, daß das X nur zum Hamburgersymbol wird, wenn ich das X direkt anklicke.
Wenn ich im Menü irgendwas auswähle, bleibt das X.

Wenn das Menü offen ist, soll der Hamburger ein X sein, wenn es geschlossen ist, ein Hamburger.

Es ist blöd zum Erklären. Einfach auf meiner HP im Menü was auswählen, dann wißt ihr, was ich meine.

Mein Script sieht so aus:

Code: Alles auswählen

<script>
var hamburger = document.querySelector(".hamburg");
hamburger.onclick = function () { this.classList.toggle ("checked") }
</script>

main.css

Code: Alles auswählen

.hamburg { position:relative ; display:inline-block ; cursor:pointer ; bottom:25px ; width:50px ; height:50px ; background:#1C1C1C ; border-radius:50% ; border:2px solid #FFF }

.hamburg.checked .line:nth-child(1) { transform:translateY(8px) rotate(-45deg) }
.hamburg.checked .line:nth-child(2) { opacity:0 }
.hamburg.checked .line:nth-child(3) { transform:translateY(-8px) rotate(45deg) }

.line { position:absolute ; left:8px ; width:30px ; height:4px; background:#FFF ; border-radius:2px ; transition:0.5s ; transform-origin:center }

.line:nth-child(1) { top:13px }
.line:nth-child(2) { top:21px }
.line:nth-child(3) { top:29px }

.line span { display:none }

Grundgerüst - footer

Code: Alles auswählen

<a class="hamburg" href="#menu">
<p class="line"><span>.</span></p>
<p class="line"><span>.</span></p>
<p class="line"><span>.</span></p>
</a>

Danke schonmal

[Max]

Wo ist denn festgelegt, wann das Menü auf und zugeklappt wird? Am besten wäre es ja das toggle() damit zu verbinden. Ansonsten bleibt der Button auch ein X wenn das Menü geschlossen wird weil man an eine andere Stelle der Webseite klickt.

[schriftsteller-stefansen]

Genau das weiß ich nicht was da rein gehört. Bin halt kein Profiscripter

[Max]

Wie hast du es denn umgesetzt, dass durch klick auf den Button das Menü überhaupt eingeblendet wird? Ist das jQuery Magie weil der Butthon href="#menu" hat? Ich arbeite selten mit jQuery und finde in deinem Code nichts dazu.

[schriftsteller-stefansen]

Hab ein a Tag mit href=#menu wie bei einem Button.

[Max]

Das war jetzt etwas komplizierter, weil du die seltsamen Funktionen aus main.js und util.js nutzt, die mit dem Design mitkamen. Ich habe dir diese beiden Dateien jetzt in deinen Account gelegt (im Ordner design) und angepasst. Auch deinen JavaScript-Schnipsel im Template habe ich angepasst. Nun sollte alles sofunktionieren, wie du es wolltest.

[schriftsteller-stefansen]

Besten Dank. Jetzt ist alles perfekt. Mußte nur noch im Grundgerüst die Pfade ändern.
Dir noch ein gutes neues Jahr. Allen anderen natürlich auch.
Liebe Grüße aus Bayerisch-Schwaben.