• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Aufklappmenü und Safari

K

ktams

Neues Mitglied
moin,
vielleicht kann mir hier einer einen Tipp geben.
Ich habe mich in den letzten 1,5 Jahren ein wenig in HTML und CSS reingefuchst, weil ich ein größeres Projekt habe.
Jetzt bin ich auf ein Problem gestoßen, für das ich keine Lösung finde.
Ich habe ein Aufklapp Menü gemacht (siehe Code) das bei den Browsern Opera, Firefox, Edge und Chrome funktioniert. Beim Safari allerdings nicht. Da klappt das Menü nur auf, solange ich mit der Maustaste draufklicke. Lasse ich die Taste los, gehts wieder zu. Außerdem wird die Background color Anweisung der Menüpunkte (soll ja rot sein) ignoriert.
Kann mir da jemand einen Hinweis geben oder einen Gegenvorschlag zu einem Aufklappmenü machen?
HTML: 
<!DOCTYPE HTML>
<html lang="de-DE">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="xyz.css">
    <title>TEST</title>
</head>

<body>
    <header>
        <a class="ribbon" tabindex="-1" title="zurück zur Startseite!" href="#">
            <h1 id="logo">Was es ist</h1>
            <p>Wer ich bin</p>
        </a>
    </header>

    <main>
        <nav id="navigation">
            <ul>
                <li>
                    <a href="#"> Text 1 </a>
                </li>
                <li>
                    <a href="#"> Text 2 </a>
                    <ul class="fly">
                        <li>
                            <a href="#"> Text 2A </a>
                        </li>
                        <li>
                            <a href="#"> Text 2B </a>
                        </li>
                        <li>
                            <a href="#"> Text 2C </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" id="act"> Text 3 </a>
                    <ul class="fly">
                        <li>
                            <a href="#"> Text 3A </a>
                        </li>
                        <li>
                            <a href="#"> Text 3B </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

    </main>

</body>

</html>

und das CSS dazu...

CSS: 
html {
    box-sizing: border-box;
    background: #d5d5d5;
}
body {
    max-width: 68.5em;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    color: #333;
    font: normal 1em Arial, sans-serif;
}
header a h1,
header a p {
    color: white;
    border-left: 0;
    padding: 0;
    display: table;
}
.ribbon {
    display: inline-block;
    position: relative;
    margin: 2em 0 2em -1.5em;
    padding: 0.5em 1em;
    background: #4e7a92;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}
.ribbon::before {
    display: block;
    width: 1.5em;
    height: 0;
    position: absolute;
    bottom: -1.5em;
    left: 0em;
    content: "";
    border-bottom: 1.5em solid transparent;
    border-right: 1.5em solid rgb(0, 80, 116);
}
main {
    margin: 0 0 1em;
    padding: 1em;
    background: #fff;
}

/** Navigation **/
nav#navigation {}
#navigation ul {
    list-style-type: none;
    width: 100%;
    margin-bottom: 30px;
}
#navigation ul li.first-child {
    border-top: 1px #DBDBDB solid;
}
#navigation ul li a {
    display: block;
    border-bottom: 1px solid #4e7a92;
    font-size: 1.1em;
    line-height: 1.5em;
    padding: 1em 30px;
    text-decoration: none;
    width: 12em;
}
#navigation ul li a:before {
    content: " ";
    display: inline-block;
    width: 1em;
    height: 1em;
    border-left: 5px solid #4e7a92;
}
ul ul {
    display: none;
}
ul li a:active+ul {
    display: block;
}
ul li a:focus+ul {
    display: block;
}
ul li ul.fly:hover {
    display: inline-block;
}
a:hover,
a:focus {
    color: white;
    text-decoration: none;
    background: linear-gradient(to bottom, #550000B0 5%, #FF0000B0 100%);
    background-color: #FF0000B0;
}
 
Werbung:
Ich habe hier ein Apple MacBook Air extra zum Testen gebraucht gekauft (also Apple Betriebssystem)
Safari ist Version 9.1.3 (9537.86.7.8)

Ich kenne mich überhaupt nicht mit Apple Produkten aus und kann nur sagen, dass ich über die Updatefunktion den Rechner und Safari (hoffentlich) auf den neuesten Stand gebracht habe.
 
Werbung:
Ob das Menü per Tastatur bedienbar sein muss, sei mal dahin gestellt. Das kommt wohl sehr auf die Anwendung an.
Der Link hat aber geholfen zu erkennen, warum das nicht aufgeklappt bleibt. An einem Work around bin ich dran.
Dies hier funktioniert leider so nicht: <body ontouchstart="">.....
Hiermit geht es schon besser:
<script> document.addEventListener("touchstart", function() {}, false);</script>
Ganz zufrieden bin ich aber noch nicht.
Bleibt noch die Frage nach dem Hintergrund. Hier funktioniert offenbar nur diese Variante:
background-color: rgba(255, 0, 0, 0.7);
Naja, muss ich eben umbauen.
Danke für die Hilfe.

Trotzdem, wenn jemand eine Alternative für so ein Aufklappmenü hat, immer her damit ;-)
 
ktams schrieb:
Ob das Menü per Tastatur bedienbar sein muss, sei mal dahin gestellt.
Zum Vergrößern anklicken....
Das ist überhaupt keine Frage: eine Seite muss immer zugänglich sein, und dazu gehört (u.a.) eben auch dass sie per Tastatur bedienbar ist. Eine abweichende Darstellung der Seite für kleine Displays wäre übrigens auch ganz hilfreich ...
ktams schrieb:
Trotzdem, wenn jemand eine Alternative für so ein Aufklappmenü hat, immer her damit ;-)
Zum Vergrößern anklicken....
siehe https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation (klappt zwar nicht so auf wie bei dir, die Seite enthält aber trotzdem einige Hinweise).
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben