[erledigt] Script Hamburger zu X Button

Hier ist Platz für alle Fragen, die mit JavaScript zu tun haben.
schriftsteller-stefansen
Beiträge: 19
Registriert: Sonntag 31. Mai 2020, 16:18
Kontaktdaten:

[erledigt] Script Hamburger zu X Button

Beitragvon schriftsteller-stefansen » Dienstag 29. Dezember 2020, 09:03

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
Zuletzt geändert von schriftsteller-stefansen am Montag 4. Januar 2021, 08:45, insgesamt 2-mal geändert.

Benutzeravatar
Max
Administrator
Beiträge: 68
Registriert: Freitag 15. November 2013, 15:00
Kontaktdaten:

Re: Script Hamburger-Menü

Beitragvon Max » Dienstag 29. Dezember 2020, 09:45

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
Beiträge: 19
Registriert: Sonntag 31. Mai 2020, 16:18
Kontaktdaten:

Re: Script Hamburger-Menü

Beitragvon schriftsteller-stefansen » Dienstag 29. Dezember 2020, 10:25

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

Benutzeravatar
Max
Administrator
Beiträge: 68
Registriert: Freitag 15. November 2013, 15:00
Kontaktdaten:

Re: Script Hamburger-Menü

Beitragvon Max » Dienstag 29. Dezember 2020, 10:36

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
Beiträge: 19
Registriert: Sonntag 31. Mai 2020, 16:18
Kontaktdaten:

Re: Script Hamburger-Menü

Beitragvon schriftsteller-stefansen » Dienstag 29. Dezember 2020, 11:48

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

Benutzeravatar
Max
Administrator
Beiträge: 68
Registriert: Freitag 15. November 2013, 15:00
Kontaktdaten:

Re: Script Hamburger-Menü

Beitragvon Max » Sonntag 3. Januar 2021, 15:59

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
Beiträge: 19
Registriert: Sonntag 31. Mai 2020, 16:18
Kontaktdaten:

[erledigt] Script Hamburger zu X Button

Beitragvon schriftsteller-stefansen » Montag 4. Januar 2021, 06:11

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.


Zurück zu „JavaScript“



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste