Toggle Navigation onclick schließen

Sundream

Hallo ihr,

ich habe für eine responsive Navigation folgenden Code verwendet:

Den Code habe ich für eine Onepage verwendet. Das heißt meine Navigationspunkte sind Anker auf der Website. Wenn ich jetzt darauf Klicke bleibt die mobile Navigation offen und stört. Wäre super, wenn sie sich wenn ich eins der li Elemente anklicke wieder schließt. Ich weiß nur leider nicht was ich beim Js ändern muss, damit das so funktioniert.

Kann mir bitte jemand weiterhelfen?

Danke!

Liebe Grüße

Sun

basti1012

auf der schnelle würde ich Javascript sagen

Code

$(document).ready(function() {
  $('body').addClass('js');
  var $menu = $('#menu'),
    $menulink = $('.menu-link');
  
$menulink.click(function() {
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
  return false;
})
  $('#menu li').click(function(){
    $menu.toggleClass('active');
})
});

Alles anzeigen

Falls ich dich jeetzt richtig verstanden habe

Sundream

Hallo Basti,

danke für die Antwort. Wenn ich das so einbaue klappt sich das Menü leider garnicht mehr auf....

Sowohl wenn ich das Javascript dadurch ersetze als auch wenn ich es zusätzlich hinzufüge...

basti1012

Das kann ich jetzt nicht nachvollziehen weil bei mir geht es

https://basti1012.bplaced.net/index.php?ordn…_schlie%C3%9Fen

Es kommen ja nur die 2 Zeilen dazu

Code

  $('#menu li').click(function(){
    $menu.toggleClass('active');
})

Oder reden wir aneinander vorbei und du meinst was anderes `?

Sundream

Also du hast mich schon richtig verstanden, nur bei mir hatte es irgendwie nicht funktioniert...

Habe es jetzt trotzdem nochmal getestet und jetzt funktioniert es... keine Ahnung warum..

Jetzt habe ich aber ein neues Problem. Die Navigation scrollt nur so lange zu dem Punkt wo sie hin soll, solange die Navigation geöffnet ist. Das heißt sie fängt an zu scrollen und bricht dann ab, weil sich die Navigation schließt. Dadurch funktioniert sie dann natürlich nicht mehr richtig.

Ist das ein normales Verhalten oder muss irgendwo ein Fehler sein? Oder gibt es etwas womit man das umgehen kann?

In deinem Code funktionierts (hab der Navigation kurz mal id-Ziele gegeben), aber meine html/body haben noch die css-Eigenschaft: scroll-behavior: smooth;

basti1012

Hast du da ein anderen Code ?

Irgendwie sehe ich da kein Code der Scrollen tut und auch keine Anker wo der Scroll Stop wäre.

Auserdem ist die Seite nicht mal hoch genug um überhaupt richtig Scrollen zu können.

Du schreibst ja das es jetzt doch geht ?

Falls doch noch was ist dann poste den aktuellen Code dazu den du auch nutzt , sonst kommt man hier durcheinander.

Wenn du aber Anker setzt, oder Plugin oder sonst was nutzen willst zum Scrollen , dann müßte man es nur in der richtigen reinfolge einbauen.

Erst das Menü schliessen und dann zu den Anker ( Id ) springen/Scrollen .

Das sollte auch ohne probleme laufen dann.

Sundream

Hier hab ich den Code mal so verändert wie ich das meine: https://codepen.io/anon/pen/BXWbZO (Hoffe der hat das jetzt gespeichert)

Wenn ich die CSS- Eigenschaften für html und body entferne kommt er im mobile Bereich wenn ich auf services klicke bis ganz nach unten. Wenn ich aber das mit dem scroll-behavior drin hab, hört er sofort auf zu scrollen, wenn die nav dann zu is (er scrollt also nichtmal ne sekunde oder so) und bleibt irgendwo mittendrin stehen.

Das würde ich verhindern wollen, weiß aber nicht wie.

basti1012

Also deine codepen link funktioniert.

Wenn ich auf service klicke scrollter komplett runter. Mit und ohne Mobile Menü.

Ohne

html { scroll-behavior: smooth;}

body html { scroll-behavior: smooth;}

springt er nach ganz unten. Auch mit und ohne Mobile Menü.

Also geht eigentlich alles.Was möchtest du den da jetzt noch geändert haben ? Soll das scroll-behavior weg bleiben ,oder warum erwähnst du das ?

Sundream

Also wenn ich das in einer mobilen Ansicht anschaue z.B. für Iphone oder so, dann hört es bei mir im Mozilla auf zu scrollen sobald sich die Navigation schließt und scrollt eben nicht bis nach unten.... Bei der Desktopansicht funktionierts, das ja, aber da is ja auch die mobile Navigation nicht sichtbar....

basti1012

In dein letzten Codepen funktioniert es bei mir. Wenn ich SERVICE oder CONTAKT anklicke scrollt er bis nach unten , und bei ABOUT scrollt er nur ein Stück was auch klar ist .

Da sollte vieleicht ach mal wer anders testen weil ich so langsam das gefühl habe das irgendwas mit mein Browser nicht stimmt.

Hier funktioniert fast alles und wo anders nicht .Verstehe ich irgendwie auch nicht. Vieleicht habe ich ein Addon der alles funktionieren läßt oder so.

Deshalb wäre gut wenn mal wer anders was dazu sagt

Sundream

Ich hab gerade mal geschaut, bei mir scrollt es nur in Mozilla Firefox und da funktioniert es auch nicht..

In Microsoft Edge und auch Chrome funktioniert es, dass er bis zum Ende der Seite geht, aber da springt er dahin und scrollt nicht...

Liegt scheinbar daran, dass einige Browser das überhaupt nicht unterstützen...

Gibt es da ne andere Lösung, dass immer zu den geklickten Navigationspunkten gescrollt wird, die in allen Browsern funktioniert?