CSS Menü - Handy (Safari und Chrome) Ausgabe

Ich habe ein Problem, das mich stört und ich kann nicht für das Leben von mir herausfinden, was es verursacht! Ich habe ein Nav-Menü mit 3 Untermenüs, die bei Hover angezeigt werden. Die Menüs sind auf mobilen Geräten im Hochformat unterschiedlich angeordnet, machen aber im Wesentlichen das Gleiche.CSS Menü - Handy (Safari und Chrome) Ausgabe

Ich verwende PHP Include, um den Seiten den Navbar-Code hinzuzufügen, damit Sie erwarten, dass der Code auf jeder Seite gleich funktioniert.

Während der Code funktioniert gut auf Desktop-Browsern, in einigen mobilen Browsern (Chrome und Safari) auf dem iPhone gibt es ein Problem - auf einer Seite werden die 3 Untermenüs korrekt angezeigt, aber auf anderen Seiten passiert nichts Sie tippen auf sie.

Der Code für das Menü unten ist, Beispiele für dieses Ereignis sind hier:

Arbeits - http://www.guernseydarts.com/new/index.php

nicht funktioniert - http://www.guernseydarts.com/new/results.php

* { 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: 'Ubuntu', sans-serif; 
 
    background-color: black; 
 
    min-width: 600px; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    max-width: 1280px; 
 
    min-width: 600px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
#bannerpic { 
 
    height: 100px; 
 
    width: 100%; 
 
    min-width: 600px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    justify-content: center; 
 
    z-index: -100; 
 
} 
 

 
#navbar { 
 
    width: 100%; 
 
    min-width: 600px; 
 
    line-height: 2em; 
 
    background-color: darkgray; 
 
    color: black; 
 
    display: inline-flex; 
 
    font-size: 1.25em; 
 
} 
 

 
#navbar a, 
 
#nav-fix, 
 
#nav-more, 
 
#nav-tables { 
 
    width: calc(100/6); 
 
    display: inline-block; 
 
    flex: 1; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
#nav-more, 
 
#nav-fix, 
 
#nav-tables { 
 
    z-index: 100; 
 
} 
 

 
#nav-more-button, 
 
#nav-more-button a, 
 
#nav-tables-button, 
 
#nav-tables-button a, 
 
#nav-fix-button, 
 
#nav-fix-button a { 
 
    width: 100%; 
 
} 
 

 
.nav-menu-category { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    background-color: gray; 
 
    color: white; 
 
    width: 100%; 
 
} 
 

 
#nav-fix-content, 
 
#nav-more-content, 
 
#nav-tables-button, 
 
#nav-tables-content, 
 
#navbar a, 
 
#nav-fix-button { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
#nav-fix-button, 
 
#nav-tables-button, 
 
#nav-more-button { 
 
    cursor: pointer; 
 
} 
 

 
#nav-fix-content a:hover, 
 
#nav-more-content a:hover, 
 
#nav-tables-content a:hover, 
 
#navbar a:hover, 
 
#nav-tables:hover #nav-tables-button, 
 
#nav-fix:hover #nav-fix-button, 
 
#nav-more:hover #nav-more-button { 
 
    color: inherit; 
 
    background-color: lightgreen; 
 
} 
 

 
#nav-fix:hover #nav-fix-content, 
 
#nav-fix:active #nav-fix-content, 
 
#nav-more:hover #nav-more-content, 
 
#nav-more:active #nav-more-content, 
 
#nav-tables:hover #nav-tables-content, 
 
#nav-tables:active #nav-tables-content { 
 
    display: block; 
 
    flex-direction: column; 
 
    animation-name: animenu; 
 
    animation-duration: 400ms; 
 
    animation-timing-function: ease-in-out; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes animenu { 
 
    0% { 
 
    opacity: 0; 
 
    transform: rotateY(-90deg); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: rotateY(0deg); 
 
    } 
 
} 
 

 
#nav-fix-content, 
 
#nav-more-content, 
 
#nav-tables-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: darkgray; 
 
    flex-direction: column; 
 
    z-index: 1000; 
 
} 
 

 
#nav-fix-content, 
 
#nav-tables-content { 
 
    left: -25%; 
 
    width: 150%; 
 
} 
 

 
#nav-more-content { 
 
    width: 100%; 
 
} 
 

 
#nav-fix-content a, 
 
#nav-more-content a, 
 
#nav-tables-content a { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
#mainbody { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    max-width: 1280px; 
 
} 
 

 
#news { 
 
    padding: 10px 20px 20px 20px; 
 
    margin: 0 auto; 
 
    flex: 1; 
 
} 
 

 
#twitter-feed { 
 
    width: 400px; 
 
    padding-right: 20px; 
 
    padding-top: 10px; 
 
    margin-bottom: 50px; 
 
} 
 

 
#newsheader { 
 
    font-size: 2.5em; 
 
    color: #618925; 
 
    padding: 20px 0 10px 20px; 
 
    text-transform: uppercase; 
 
    width: 100%; 
 
} 
 

 
.article { 
 
    padding: 2%; 
 
    background-color: #292F33; 
 
    margin-bottom: 25px; 
 
    border-radius: 5px; 
 
} 
 

 
.article-header { 
 
    font-size: 1.5em; 
 
    color: #86C232; 
 
} 
 

 
.article-post-date { 
 
    font-size: 0.75em; 
 
    color: #86C232; 
 
} 
 

 
.article p { 
 
    padding-top: 15px; 
 
    color: lightgray; 
 
} 
 

 
.article p a { 
 
    color: #86C232; 
 
} 
 

 
.article p#countercss { 
 
    text-align: center; 
 
    padding-top: 0; 
 
} 
 

 
.article:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
#dtcopyright { 
 
    text-align: center; 
 
    width: 100%; 
 
    color: white; 
 
    margin-bottom: 3% 
 
} 
 

 

 
/* MEDIA */ 
 

 
@media only screen and (orientation: portrait) { 
 
    body { 
 
    font-size: 2.5em; 
 
    } 
 
    #twitter-feed { 
 
    display: none; 
 
    } 
 
    #newsheader { 
 
    text-align: center; 
 
    } 
 
    .article p#countercss img { 
 
    transform: scale(2); 
 
    vertical-align: middle; 
 
    } 
 
    /* HEADERNAV */ 
 
    #navbar, 
 
    #navbar a, 
 
    #nav-more, 
 
    #nav-fix, 
 
    #nav-tables { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
    #navbar a, 
 
    #nav-fix-button, 
 
    #nav-more-button, 
 
    #nav-tables-button { 
 
    border-bottom: 1px solid black; 
 
    } 
 
    #nav-fix-content, 
 
    #nav-tables-content { 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: #666666; 
 
    } 
 
    #nav-fix-content, 
 
    #nav-more-content, 
 
    #nav-tables-content { 
 
    position: relative; 
 
    } 
 
    #nav-fix:hover #nav-fix-content, 
 
    #nav-more:hover #nav-more-content, 
 
    #nav-tables:hover #nav-tables-content, 
 
    #nav-fix:active #nav-fix-content, 
 
    #nav-more:active #nav-more-content, 
 
    #nav-tables:active #nav-tables-content { 
 
    display: block; 
 
    flex-direction: column; 
 
    animation: none; 
 
    } 
 
    /* END OF HEADERNAV */ 
 
}

<div id="bannerpic"><img src="http://www.guernseydarts.com/banner1.jpg" alt="bannerpic"></div> 
 
<!-- End of "bannerpic" --> 
 
<div id="navbar"> 
 
    <a href="http://www.guernseydarts.com/new/index.php">Home</a> 
 
    <div id="nav-fix"> 
 
    <div id="nav-fix-button">Fixtures</div> 
 
    <!-- End of "nav-fix-button" --> 
 
    <div id="nav-fix-content"> 
 
     <div class="nav-menu-category">Herald</div> 
 
     <a href="http://www.guernseydarts.com/fix/heralddiv1.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/fix/heralddiv2.htm">Division 2</a> 
 
     <div class="nav-menu-category">GDL Individual</div> 
 
     <a href="http://www.guernseydarts.com/fix/gdlfix1.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/fix/gdlfix2.htm">Division 2</a> 
 
     <a href="http://www.guernseydarts.com/fix/gdlfix3.htm">Division 3</a> 
 
     <div class="nav-menu-category">Maple Leaf</div> 
 
     <a href="http://www.guernseydarts.com/fix/maplefix.htm">Division 1</a> 
 
     <div class="nav-menu-category">Triples</div> 
 
     <a href="http://www.guernseydarts.com/fix/triplesdiv1.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/fix/triplesdiv2.htm">Division 2</a> 
 
     <div class="nav-menu-category">Western Individual</div> 
 
     <a href="http://www.guernseydarts.com/fix/westindfixdiv1.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/fix/westindfixdiv2.htm">Division 2</a> 
 
     <a href="http://www.guernseydarts.com/fix/westindfixdiv3.htm">Division 3</a> 
 
    </div> 
 
    <!-- End of "nav-fix-content" --> 
 
    </div> 
 
    <!-- End of "nav-fix" --> 
 
    <div id="nav-tables"> 
 
    <div id="nav-tables-button">Tables</div> 
 
    <!-- End of "nav-tables-button" --> 
 
    <div id="nav-tables-content"> 
 
     <div class="nav-menu-category">Herald</div> 
 
     <a href="http://www.guernseydarts.com/tables/heraldtables.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/tables/heraldtables.htm#herald2">Division 2</a> 
 
     <div class="nav-menu-category">GDL Individual</div> 
 
     <a href="http://www.guernseydarts.com/tables/gdltables.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/tables/gdltables.htm#indiv2">Division 2</a> 
 
     <a href="http://www.guernseydarts.com/tables/gdltables.htm#indiv3">Division 3</a> 
 
     <!--<div class="nav-menu-category">Maple Leaf</div> 
 
    \t \t \t \t \t <a href="fix/maplefix.htm">Division 1</a>--> 
 
     <div class="nav-menu-category">Triples</div> 
 
     <a href="http://www.guernseydarts.com/tables/triplestables.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/tables/triplestables.htm#triples2">Division 2</a> 
 
     <div class="nav-menu-category">Western Individual</div> 
 
     <a href="http://www.guernseydarts.com/tables/westindtables.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/tables/westindtables.htm#div2">Division 2</a> 
 
     <a href="http://www.guernseydarts.com/tables/westindtables.htm#div3">Division 3</a> 
 
    </div> 
 
    <!-- End of "nav-tables-content" --> 
 
    </div> 
 
    <!-- End of "nav-tables" --> 
 
    <a href="http://www.guernseydarts.com/new/results.php">Results</a> 
 
    <a href="http://www.guernseydarts.com/mapleleaf.html">Maple Leaf</a> 
 
    <div id="nav-more"> 
 
    <div id="nav-more-button">More</div> 
 
    <!-- End of "nav-more-button" --> 
 
    <div id="nav-more-content"> 
 
     <a href="http://forum.guernseydarts.com">Forum</a> 
 
     <a href="http://www.guernseydarts.com/photos.htm">Photos</a> 
 
     <a href="http://www.guernseydarts.com/archive.htm">Archive</a> 
 
     <a href="http://www.guernseydarts.com/links.htm">Links</a> 
 
     <a href="http://forum.guernseydarts.com/calendar.htm">Calendar</a> 
 
    </div> 
 
    <!-- End of "nav-more-content" --> 
 
    </div> 
 
    <!-- End of "nav-more" --> 
 
</div> 
 
<!-- End of "navbar" -->

Jede mögliche Hilfe geschätzt werden.

Dank

Quelle

2017-06-19 D. Topley

Sowohl Chrome und Safari ist Webkit-Browser und meine Vermutung ist, dies mit nicht prefixing CSS zu tun hat.

Der vollständig voran @keyframes Code sollte wie folgt aussehen:

@-webkit-keyframes animenu { 
    0% {opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg);} 
    100% {opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);} 
} 
@keyframes animenu { 
    0% {opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg);} 
    100% {opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);} 
}

In der Tat, sollten Sie Ihre gesamte CSS durch Autoprefixer, führen Sie den "Filter" Feld > 0% Einstellung.

Sie haben auch 5 errors aber keiner von ihnen erklärt das Problem, das Sie beschreiben. Allerdings ist die Einstellung für die Zeichencodierung ziemlich ernst.

Last, but not least, verlassen sich nicht auf

animation-fill-mode: forwards;

... Ihre endgültige Animation Zustand auf die hovered-/aktiven Einzelteile zu halten. Fügen Sie dem Regelsatz den Endstatus der Animation hinzu:

Es kann nicht schaden und es hat keinen Einfluss auf die Animation. Aber Browser, die Probleme mit den @keyframe s haben, werden standardmäßig die Stile ohne Animation anwenden, anstatt nichts zu tun.

Quelle

2017-06-19 19:34:31

Vielen Dank für die Antwort - Ich korrigierte das Problem mit der Zeichenkodierung und auch Autoprefixer (hatte noch nie von dieser Seite gehört, werde vorwärts gehen!), Um das CSS zu korrigieren. Leider bleibt das Problem bestehen und ich wäre dankbar für weitere Vorschläge! –

@ D.Topley, ohne weitere Informationen, ich fürchte, ich kann nicht weiter helfen. Bis jetzt haben Sie noch keine [mcve] bereitgestellt. Sie sollten wahrscheinlich weitere Details zum Reproduzieren des Problems angeben. –

CSS Menü - Handy (Safari und Chrome) Ausgabe

Antwort

Verwandte Themen