navbar mit href Safari Probleme

  • Guten Morgen, oder besser, Mahlzeit :-)


    Ich habe ein Problem bei meiner ersten Website. Ich habe eine Nav-Bar erstellt, die funktioniert auf IE, Chrome und auf Firefox. Nur der Safari macht Probleme, das habe ich aber erst nach dem Launch festgestellt. Ich konnte auf meinem Windows-Computer nur die anderen drei Browser testen. Auf dem iPhone habe ich es dann gemerkt... Könnt ihr mir hier helfen?


    html Ausschnitt:



    Das dazugehörige CSS:


    und für das Grid-System (ich arbeite nicht mit bootstrap, habe eigene Werte erstellt):



    Wo hat Safari hier ein Problem? Ist es, weil das Logo und der Hamburger in einer col sind und die sich deswegen überschneiden? Ich kann in den dev mode von Chrome aber auch nichts entdecken....


    Wäre für jede Hilfe dankbar...


    MfG


    Erik

  • Leider besitze ich kein iPhone und leider beschreibst Du nicht, was genau dort das Problem ist.

    Es könnte sein, dass das kein Problem vom Safari ist sondern einfach der Darstellung auf einem schmalen Bildschirm.

    Generell kann es eine Quelle von Problemen sein, wenn mit float gearbeitet wird statt mit Flex oder Grid.

  • Es wäre gut zu wissen, was du mit "nicht funktionieren" meinst.

    Außerdem wäre es hilfreich zu wissen, auf welcher iOS Safari Version du getestet hast.

    Und auf welchem iPhone Model du die Seite getestest hast.


    Ist die Seite öffentlich erreichbar? Wie ist denn die Adresse?

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von AndreasB ()

  • Sorry für die fehlenden Informationen... also ich habe es auf iPhone 11 Pro iOS 14.2 und iPhone SE iOS 14.2 getestet... beides der gleiche Fehler bzw. Verhalten.


    wenn ich auf den Hamburger klicke, öffnet sich das Geld nicht wo die Menü Punkte aufkommen, also die ul ist nicht auswählbar... ich vermute das funktioniert nicht:


    #mobile-nav-dropdown:hover > #mobile-nav-content {
    display: block;
    }

    Der content wird nicht aufgerufen...


    mit chrome auf den iPhones geht es, also gehe ich vom Safari aus, nicht auf Fehler vom Responsive Design.

  • Du öffnest das Menü durch hover, das gibt es auf einem Smartphone nicht. Viele Browserhersteller haben jedoch einen Workaround gemacht, in dem Sinne, dass die hover-Aktion durch Touch ausgelöst wird, deshalb funktioniert es im Chrome. Aber es spricht dann einiges dafür, dass das beim Safari nicht der Fall ist. Du wirst dann das Menü durch Javascript öffnen müssen.

  • Oh, guter Einwand... daran habe ich nicht gedacht. Weil beim Handy gibts ja keine Maus mit der man „hovern“ kann... kann ich statt hover muss ich dann JavaScript touch nehmen, richtig?

  • Zitat

    kann ich statt hover muss ich dann JavaScript touch nehmen, richtig?

    Ja, mit Javascript eine Klasse, z. B. "visi" toggeln und auf Grund dieser Klasse dann im CSS das Menü sichtbar machen.

  • Hier ist es gut beschrieben: https://stackoverflow.com/ques…es-the-hover-pseudo-class
    Für iOS Safari gilt: Wenn ein HtmlElement nicht "clickable" ist, hat es auch keine Unterstützung für die Pseudoklasse :hover.


    Wenn du also ein "clickable" Element verwendest, geht's.

    Du kannst zB einen <button> verwenden.

    Oder einfach dem Element einen click Handler verpassen. Dann ist es für den Browser auch "clickable". Dafür reicht eine Zeile JS:

    JavaScript
    1. document.querySelector('#mobile-nav-dropdown').addEventListener('click', () => {});



    Ich würde dir aber trotzdem empfehlen, das Ganze öffnen und schließen. (das wird nämlich dann die weitere Herausforderung) mit JS zu implementieren und dich nicht auf solch hacky Lösungen zu verlassen.

    Dadurch bist du auch wesentlich flexibler, was das Verhalten angeht.

    Ich habe bisher immer js vermieden...

    Wenn du sicher gehen möchtest, dass dein UI auf allen Plattformen sauber funktioniert, kommst du an JS nicht vorbei.
    Du siehst ja, was passiert, wenn du versuchst ein einfaches Aufklappmenu nur mit CSS zu implementieren.

  • Oh, guter Einwand... daran habe ich nicht gedacht. Weil beim Handy gibts ja keine Maus mit der man „hovern“ kann...

    Vergiss die Tastaturbedienung nicht! :hover feuert nicht wenn das Element per Tastatur angesteuert wird …

  • document.querySelector('#mobile-nav-dropdown').addEventListener('click', () => {});

    vielen dank, damit geht es wie gewünscht.


    Ich werde aber noch ein paar Kleinigkeiten auf der Seite anpassen und in der nächsten Version mit javascript arbeiten... Ich habe schon einen Kurs über 40h gebucht... der ist jetzt als nächstes dran... der html und css kurs den ich gemacht habe war 33 Stunden... war sehr lehrreich.., aber da wurde auf so ein Problem nicht hingewiesen :-)


    aber dafür hat man dieses tolle Forum, hier wurde mir schon oft geholfen, fettes merci dafür an alle!