ChrisF: CSS Dropdown funktioniert nicht auf IPhone

SELF-Forum

CSS Dropdown funktioniert nicht auf IPhone

ChrisF (Versionen)
– Informationen zu den Bewertungsregeln

Hallo,ich habe ein Dropdown-Menü nur mit CSS in meiner Homepage aber das funktioniert leider nicht auf meinem Handy.Was muß ich da anders machen? …

<style>

#nav {
	font-family: "ibm-plex-devanagari", sans-serif ;
        font-weight: 400 ;
        font-style: normal ;
	font-size: 1.6em ;
        position: static ;
        width: 420px ;
        margin: 0 ;
        margin-top: 0 ;
        padding: 0 ;
	display: inline-block ;
}

ul#navigation {
    margin: 0.1em ;
    position: relative ;
    float: left ;
    border-left: none ;
    border-right: none ;
}

ul#navigation li {
    display: inline ;
    font-size: 12px ;
    font-weight: normal ;
    margin: 0 ;
    padding: 0 ;
    float: None ;
    position: relative ;
    border-top: none ;
    border-bottom: None ;
}
 
ul#navigation li a {
    padding:3px 15px;
    color:#000000;
    text-shadow:none;
    text-decoration:none;
    display:inline-block;
    border-right:none;
    border-left:none;
    border-top:none;
    background: none;
 
    -webkit-transition:color 0.2s linear, background 0.2s linear;
    -moz-transition:color 0.2s linear, background 0.2s linear;
    -o-transition:color 0.2s linear, background 0.2s linear;
    transition:color 0.2s linear, background 0.2s linear;
}
 
ul#navigation li a:hover {
    background:none;
    color:none;
}
 
 
ul#navigation li:hover > a {
    background:none;
	color: #F6A713 ;
}


ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
    visibility:visible;
    opacity:1;

}
 
ul#navigation ul, ul#navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0 ;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
    width:80px;
    background:none;
    box-shadow:none;
/* css3 transitions for smooth hover effect */
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;
    -o-transition:opacity 0.2s linear, visibility 0.2s linear;
    transition:opacity 0.2s linear, visibility 0.2s linear;
}
 
ul#navigation ul {
    top: 24px;
    left: 22px;
}
 
ul#navigation ul li ul {
	
	text-align : center ;
    top: 0;
    margin-left: -12.3em; /* strong related to width:180px; from above */
}
 
ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:none;
}
 
ul#navigation ul li a
{   background:none;
    padding: 0.5em ;
	margin-left: 0 ;
    color:#616161;
    text-shadow:14px 22px 10px #ffffff;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px ; }

...</style>

</head>
<body>
…

<nav id="nav">

  <ul id="navigation">

        <li><a class="rmcloak-stay-invisible" href="#">Arbeiten &RightTriangle;</a>
            <ul>
                <li><a href="#">2016</a>
				<ul>
					<li><a href="#">-</a></li>
					<li><a href="#">-</a></li>
					<li><a href="#">März</a></li>
					<li><a href="#">April</a></li>
					<li><a href="#">Mai</a></li>
					<li><a href="#">Juni</a></li>
					<li><a href="#">Juli</a></li>
					<li><a href="#">August</a></li>
					<li><a href="#">September</a></li>
					<li><a href="#">Oktober</a></li>
					<li><a href="#">November</a></li>
					<li><a href="#">Dezember</a></li>
					</ul></li>
                <li><a href="#">2017</a>
				<ul>
					<li><a href="#">Januar</a></li>
					<li><a href="#">Februar</a></li>
					<li><a href="#">März</a></li>
					<li><a href="#">April</a></li>
					<li><a href="#">Mai</a></li>
					<li><a href="#">Juni</a></li>
					<li><a href="#">Juli</a></li>
					<li><a href="#">August</a></li>
					<li><a href="#">September</a></li>
					<li><a href="#">Oktober</a></li>
					<li><a href="#">November</a></li>
					<li><a href="#">Dezember</a></li>
					</ul></li>
                <li><a href="#">2018</a>
					<ul>
					<li><a href="#">Januar</a></li>
					<li><a href="#">Februar</a></li>
					<li><a href="#">März</a></li>
					<li><a href="#">April</a></li>
					<li><a href="#">Mai</a></li>
					<li><a href="#">Juni</a></li>
					<li><a href="#">Juli</a></li>
					<li><a href="#">August</a></li>
					<li><a href="#">September</a></li>
					<li><a href="#">Oktober</a></li>
					<li><a href="#">November</a></li>
					<li><a href="#">Dezember</a></li>
					</ul>
				</li>
				<li><a href="#">2019</a>
					<ul>
					<li><a href="#">Januar</a></li>
					<li><a href="#">Februar</a></li>
					<li><a href="#">März</a></li>
					<li><a href="#">April</a></li>
					<li><a href="#">Mai</a></li>
					<li><a href="#">Juni</a></li>
					<li><a href="#">Juli</a></li>
					<li><a href="#">August</a></li>
					<li><a href="#">September</a></li>
					<li><a href="#">Oktober</a></li>
					<li><a href="#">November</a></li>
					<li><a href="#">Dezember</a></li>
					</ul>
				</li>
				</li>
            </ul>
        </li>
		<li><a href="mailto:fromhein@gmx.de">Kontakt</a>
             
                </li>
		<li><a href="../OneDrive/Desktop/neu/HTML/Meine Homepage/uebermich.html">Über mich</a></li>
    </ul>
</nav>...
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS Dropdown funktioniert nicht auf IPhone

    Christian Kruse Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    Hallo ChrisF,

    Hallo,ich habe ein Dropdown-Menü nur mit CSS in meiner Homepage aber das funktioniert leider nicht auf meinem Handy.Was muß ich da anders machen? …

    ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
    visibility:visible;
    opacity:1;

}

    du musst konzeptionell etwas anders machen: es gibt kein hover auf Touch-Geräten. Du könntest bei einem reinen CSS-Menü mit focus-within arbeiten, dazu gibt es auch einen Artikel im Wiki.

    Aber reine CSS-Menüs sind suboptimal… arbeite da lieber zusätzlich mit JavaScript.

    LG,
    CK

    --
    https://wwwtech.de/about
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. CSS Dropdown funktioniert nicht auf IPhone

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@ChrisF

    Hallo,ich habe ein Dropdown-Menü nur mit CSS in meiner Homepage aber das funktioniert leider nicht auf meinem Handy.

    Es funktioniert auch nicht auf dem Desktop. Nicht mit Tastatursteuerung.

    Ein Dropdown-Menü ist nur mit CSS nicht vernünftig umsetzbar.

    Du müsstest Buttons vorsehen, mit denen über das aria-expanded-Attribut per JavaScript die Untermenüs ein- und ausgeblendet werden. Wie in diesem Beispiel.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS Dropdown funktioniert nicht auf IPhone

      Christian Kruse Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Gunnar,

      Ein Dropdown-Menü ist nur mit CSS nicht vernünftig umsetzbar.

      Faszinierend. Das sage ich bereits seit dem aufkommen von CSS-Dropdowns. Damals[tm] hat man mich ignoriert oder belächelt 😉

      LG,
      CK

      --
      https://wwwtech.de/about
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. CSS Dropdown funktioniert nicht auf IPhone

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@ChrisF

    Was muß ich da anders machen?

    Abgesehen vom Menü:

    	font-family: "ibm-plex-devanagari", sans-serif ;

    Inhalt in Hindi oder einer anderen in Indien gesprochenen Sprache?

    					<li><a href="#">März</a></li>
					<li><a href="#">April</a></li>

    Nee, doch nicht. Welchen Sinn macht es dann, eine Schriftart mit Devanagari-Zeichen zu verwenden? Du willst vermutlich IBM Plex Sans verwenden, die es inzwischen auch als variable font gibt.

        font-size: 12px ;

    Du hast vielleicht (noch!) Adleraugen. Nutzer deiner Seiten haben die nicht. 12px ist viel zu klein. Alles, was unter 16px dargestellt wird, ist wohl so unwichtig, dass es nicht gelesen werden soll?

    Im Übrigen halte ich so ziemlich jedes Vorkommen von px für einen Fehler. Besser sind Maßangaben bezogen auf die (Default-)Schriftgröße in rem bzw. em oder bezogen auf die Größe der umgebenden Box in % bzw. des Viewports in vw, vh, …

        -webkit-transition:color 0.2s linear, background 0.2s linear;
    -moz-transition:color 0.2s linear, background 0.2s linear;
    -o-transition:color 0.2s linear, background 0.2s linear;
    transition:color 0.2s linear, background 0.2s linear;

    Can I use verrät dir, dass hier sämtliche Angaben mit Präfixen unsinnig sind. Weg damit!

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln