Navigations-Menü für Smartphone erstellen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
27 April 2017
102
1
18
32
#21
Ich hab mal drüber geschaut, im Beispiel von denen sieht es jetzt weniger danach aus? Jedenfalls kann ich da jetzt keine Funktion erkennen. Ich könnte den Code ja jetzt nicht für meinen html und CSS Code verwenden oder? Müsste ich jetzt den Code nehmen. Ich hab schon so viele Navigations-Codes versucht, dass ich schon etwas durch den Wind bin ^^

Ah! In deinem Link ist das ja nicht schlecht. Vielleicht muss ich das mal testen.
 
27 April 2017
102
1
18
32
#22
Moin @Sempervivum - ich hab erst heute gesehen das dein Link ja mein Code ist. Hatte ich erst gar nicht gesehen.

Was mich komischerweise verwirrt, das Aufklappen und Scrollen geht mit deinem Code jetzt auch ohne JavaScript. Hab es mehrfach getestet und funktioniert. Der einzige Unterschied ist, dass mit JavaScript eben die Scrollbalken weg sind. Aber die hab ich jetzt bei der Version ohne JavaScript mit folgender CSS Anweisung entfernt:

Code:
nav::-webkit-scrollbar {
  display: none;
}
Den Code nutze ich auch bei meiner aktiven Seite und bisher hat sich da noch niemand beschwert. Die CSS Anweisung ist wohl noch nicht so gängig, soll wohl auch nicht bei allen Browsern gehen, aber hauptsächlich ältere. Aktuell wäre es fast so wie ich will, noch nicht ganz, auch ohne JavaScript. Paar Details fehlen mir noch z.B das wenn man das Menü öffnet, dass ein X erscheint statt weiterhin das Menü. Aber ich glaube das sind jetzt nur noch CSS Einstellungen. Solange das Aufklappen und Scrollen geht bin ich schon mal happy.

UPDATE: Okay, beim Firefox scheint es wohl nicht zu funktionieren mit meiner CSS Anweisung. Dann muss ich wohl doch mit Javascript arbeiten :S

Ist die JavaScript Datei nur für die Scrollbalken zuständig? Weil wie gesagt, der Swipe funktioniert auch ohne.
 
Zuletzt bearbeitet:
27 April 2017
102
1
18
32
#26
Hab es selbst nach geguckt, Thema hatte ich noch nicht. Ist immer ein Reflex danach zu fragen. Aber ich glaube meine Freude hält nicht lange @Sempervivum , denn anscheinend passiert bei dem JavaScript doch nichts. Bei mir sind die Scrollbalken trotzdem da. Ist mir erst nicht aufgefallen, weil du nur so wenig Menüpunkte hast. Pack in dein Beispiel mal so viele rein, damit man auch bei einem PC Scrollen muss. Dann sehen wir ob es funktioniert oder nicht.
 
27 April 2017
102
1
18
32
#28
Hmm, damit ist mein Problem immer noch nicht gelöst. Beim Smartphone taucht die Scrollbar auch auf, bei manchen gibt es das jedenfalls noch. Fassen wir mal zusammen: Mit deinem Code funktioniert der Swipe und das Menü lässt sich auch wie gewünscht scrollen. Dass schon mal mehr als ich vorher hatte. Das einzige Problem was noch vorhanden ist, sind die Scrollbalken.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.177
252
83
65
#29
Ich habe es noch Mal auf meinem Samsung S4 mit den Browsern, die ich dort habe, getestet: Firefox, Chrome und der Android-Browser. In allen dreien funktioniert das Scrollen des nav-Containers ohne das Javascript. Scrollbar so wie auf dem Desktop taucht bei keinem auf, nur dieser dunkle Scrollbalken, der bei Touch-Geräten Standard ist.
 
27 April 2017
102
1
18
32
#30
Ich hab am Wochenende noch eine Menge ausprobiert und komme so langsam dahinter. Basierend auf dem Code den du mir geschickt hast in deinem Beispiel. Ich hab festgestellt, dass meine Beispielseite das mit dem Scrollen auch nicht 100%ig gelöst bekommen hat. z.B beim Firefox ist bei denen auch die Scrollbar zu sehen. Die Scrollbar lässt sich nur bei Google/Android und IOS Systemen 100% entfernen. Im Moment hab ich den Code so geändert und angepasst, dass es immer mehr meiner Vorstellung nahe kommt. Ich probiere noch ein bisschen rum, melde mich dann nochmal.
 
27 April 2017
102
1
18
32
#31
Ich hab jetzt mal die Test-Seite von mit online gestellt: Siehe hier

Im Grunde macht es jetzt das was ich möchte. Beim Firefox ist die Scrollbar nicht zu verhindern. Allerdings ist jetzt was anderes komisch am Firefox. Wenn man bei dem auf die Navigation klickt erscheint das "X Navigation" nicht. Erst wenn man nach dem Menü klicken die Seite refresht taucht es auf. Laut Code sollte das allerdings nicht passieren. Hab es extra jetzt online gestellt, kann man vielleicht die Fehler besser finden.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.177
252
83
65
#32
Was auffällt: ID doppelt vergeben:
Code:
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label">
    <span>&#9776;</span> Navigation</label>

<nav>
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label nav-label-pos">
Könnte gut sein, dass das das Problem beim FF verursacht.
 
27 April 2017
102
1
18
32
#33
Hab es eben mal getestet. Das mit der ID sollte natürlich nicht sein, aber der Fehler ist es nicht. Es ist diese CSS Anweisung. Mit dem fixed kommt Firefox als einziger Browser nicht klar. Wenn ich da relative schreibe klappt es. Aber ich möchte ja das das "X Navigation" stehen bleibt, wenn man in der Navigation scrollt. Ob es da noch eine andere Möglichkeit gibt?

Code:
.nav-label-pos {
  position: fixed;
  top: 0;
  z-index: 999;
}