1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Navigations-Menü für Smartphone erstellen

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von marcelgerard, 9 April 2018.

  1. marcelgerard

    marcelgerard Mitglied

    Registriert seit:
    27 April 2017
    Beiträge:
    92
    Punkte für Erfolge:
    8
    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.
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. marcelgerard

    marcelgerard Mitglied

    Registriert seit:
    27 April 2017
    Beiträge:
    92
    Punkte für Erfolge:
    8
    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 (text):
    1. nav::-webkit-scrollbar {
    2.   display: none;
    3. }
    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: 11 April 2018
  3. Sempervivum

    Sempervivum Senior HTML'ler

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    1.022
    Punkte für Erfolge:
    63
    Interessante Information, danke. Dann habe ich wohl das mit hammer.js ein wenig falsch verstanden. Und das ist dann wohl auch die Erklärung, warum es nicht funktioniert, wenn man direction auf vertical setzt: Das fängt offenbar die Default-Aktion, das Scrollen ab.
     
  4. marcelgerard

    marcelgerard Mitglied

    Registriert seit:
    27 April 2017
    Beiträge:
    92
    Punkte für Erfolge:
    8
  5. m.scatello

    m.scatello Aktives Mitglied

    Registriert seit:
    15 Februar 2017
    Beiträge:
    738
    Punkte für Erfolge:
    28
  6. marcelgerard

    marcelgerard Mitglied

    Registriert seit:
    27 April 2017
    Beiträge:
    92
    Punkte für Erfolge:
    8
    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.
     
  7. Sempervivum

    Sempervivum Senior HTML'ler

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    1.022
    Punkte für Erfolge:
    63
    Davon kann man sich auch überzeugen, indem man das Browserfenster von der Höhe her sehr klein macht, auf dem PC wird dann natürlich die Scrollbar eingeblendet.
     
  8. marcelgerard

    marcelgerard Mitglied

    Registriert seit:
    27 April 2017
    Beiträge:
    92
    Punkte für Erfolge:
    8
    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.
     
  9. Sempervivum

    Sempervivum Senior HTML'ler

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    1.022
    Punkte für Erfolge:
    63
    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.
     
  10. marcelgerard

    marcelgerard Mitglied

    Registriert seit:
    27 April 2017
    Beiträge:
    92
    Punkte für Erfolge:
    8
    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.
     
  11. marcelgerard

    marcelgerard Mitglied

    Registriert seit:
    27 April 2017
    Beiträge:
    92
    Punkte für Erfolge:
    8
    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.
     
  12. Sempervivum

    Sempervivum Senior HTML'ler

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    1.022
    Punkte für Erfolge:
    63
    Was auffällt: ID doppelt vergeben:
    Code (text):
    1. <input type="checkbox" id="responsive-nav">
    2. <label for="responsive-nav" class="responsive-nav-label">
    3.     <span>&#9776;</span> Navigation</label>
    4.  
    5. <nav>
    6. <input type="checkbox" id="responsive-nav">
    7. <label for="responsive-nav" class="responsive-nav-label nav-label-pos">
    Könnte gut sein, dass das das Problem beim FF verursacht.
     
  13. marcelgerard

    marcelgerard Mitglied

    Registriert seit:
    27 April 2017
    Beiträge:
    92
    Punkte für Erfolge:
    8
    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 (text):
    1. .nav-label-pos {
    2.   position: fixed;
    3.   top: 0;
    4.   z-index: 999;
    5. }
    6.