CSS菜单 - 移动(Safari和Chrome)问题
问题描述:
我有一个困扰我的问题,我无法为我的生活找出造成它的原因!我有一个导航菜单,其中有3个子菜单出现在悬停上。这些菜单在移动设备上的纵向排列方式各不相同,但本质上是一样的。CSS菜单 - 移动(Safari和Chrome)问题
我使用php include将navbar代码添加到页面,所以您会希望代码在每个页面上都能够工作。
但是,尽管代码在桌面浏览器上正常工作,但在iPhone上的某些移动浏览器(Chrome和Safari)上存在问题 - 在一个页面上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" -->
任何帮助不胜感激。
感谢
答
两个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
s有问题的浏览器将默认应用没有动画的样式,而不会执行任何操作。
非常感谢您的回复 - 我更正了字符编码问题,并且还使用了Autoprefixer(以前没有听说过此网站,将会使用前进!)来更正CSS。不幸的是,这个问题仍然存在,所以我会很感激任何额外的建议! –
@ D.Topley,没有更多信息,恐怕我无法进一步帮助。到目前为止,你还没有提供[mcve]。你应该提供更多关于如何重现问题的细节。 –