1. ホーム
  2. 質問と答え
  3. CSSメニュー - モバイル（SafariとChrome）の問題

CSSメニュー - モバイル（SafariとChrome）の問題

2017-06-19 13 views
0

私には気になる問題があり、私の人生では何が起こっているのかは分かりません。私はホバー上に表示される3つのサブメニューを持つナビゲーションメニューを持っています。メニューは、縦向きのモバイルデバイス上で異なるが、本質的に同じことをする。CSSメニュー - モバイル（SafariとChrome）の問題

php includeを使用してnavbarコードをページに追加して、各ページで同じコードが動作することを期待します。

しかし、コードがデスクトップブラウザでうまく動作しているのに、iPhoneの一部のモバイルブラウザ（ChromeとSafari）では問題があります.1ページに3つのサブメニューが正しく表示されますが、他のページでは何も起こりませんあなたはそれらをタップします。

メニューのためのコードは以下の通りです、この出来事の例はここにある：

作業 - http://www.guernseydarts.com/new/index.php

が動作しない - 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" -->

どれでも役立つだろう感謝する。

おかげ

出典

2017-06-19 D. Topley

答えて

0

ChromeとSafariの両方がWebKitのブラウザであり、私の推測では、これはあなたのCSSを前置いないに関係しています。

完全に接頭辞@keyframesコードは次のようになります。

@-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);} 
}

実際には、あなたがAutoprefixerを通して、あなたの全体のCSSを実行する必要があり、> 0%に「フィルター」ボックスを設定します。

5 errorsもありますが、説明した問題については説明していません。しかし、文字エンコーディングを設定しないことはかなり深刻です。

最後に、ではなく、少なくとも、ホバー/アクティブ項目に最終的なアニメーションの状態を維持するために...

animation-fill-mode: forwards;

に依存しないでください。アニメーションの最終状態をルールセットに追加します。

opacity: 1; 
-webkit-transform: rotateY(0deg); 
     transform: rotateY(0deg);

アニメーションには影響しません。しかし、@keyframeに問題があるブラウザでは、何もしない代わりに、アニメーションなしでスタイルを適用するようにデフォルト設定されます。

出典

2017-06-19 19:34:31

+0

返信ありがとうございます - 私は文字エンコーディングの問題を修正し、また、CSSを修正するためにAutoprefixer（前にこのサイトについて聞いたことがなく、今後も使用する予定です）を使用しました。残念ながら問題は残っていますので、私は追加の提案に感謝します！ –

+0

@ D.Topley、もっと情報がなければ、私はもう助けることができません。今のところあなたは[mcve]を提供していません。おそらく、問題を再現する方法の詳細を提供する必要があります。 –

関連する問題

 関連する問題