Seite 1 von 1

[erledigt] Script Hamburger zu X Button

Verfasst: Dienstag 29. Dezember 2020, 09:03
von 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

Re: Script Hamburger-Menü

Verfasst: Dienstag 29. Dezember 2020, 09:45
von 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.

Re: Script Hamburger-Menü

Verfasst: Dienstag 29. Dezember 2020, 10:25
von schriftsteller-stefansen
Genau das weiß ich nicht was da rein gehört. Bin halt kein Profiscripter

Re: Script Hamburger-Menü

Verfasst: Dienstag 29. Dezember 2020, 10:36
von 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.

Re: Script Hamburger-Menü

Verfasst: Dienstag 29. Dezember 2020, 11:48
von schriftsteller-stefansen
Hab ein a Tag mit href=#menu wie bei einem Button.

Re: Script Hamburger-Menü

Verfasst: Sonntag 3. Januar 2021, 15:59
von 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.

[erledigt] Script Hamburger zu X Button

Verfasst: Montag 4. Januar 2021, 06:11
von 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.