Question

我的网站有一个下拉菜单，在iOS或Android上无效。我知道问题是由于这些设备上没有光标，所以我希望将菜单从悬停操作切换到可点击的操作。我缺乏适当的术语来巧妙地谈论这个主题，所以希望我所要求的是有道理的。 www.salvageinteriors.com

这是我的代码：

CSS：

#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
z-index: 29;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 31px;
background-color: #ffffff;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
width: 940px;
}
#cssmenu > ul > li {
float: left;
margin-left: 45px;
margin-top: -20px;
position: relative;
}
#cssmenu > ul > li > a {
color: #000000;
font-family: calibri;
font-size: 18px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #000000;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #000000;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
 box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #000000 transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #ffffff;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #000000;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #000000;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #ffffff;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #ffffff;
color: #000000;
}

HTML：

<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='http://www.salvageinteriors.com/p/work.html'>     <span>Work</span></a>
<ul>
<li><a href='http://www.salvageinteriors.com/p/commercial.html'><span>Commercial Fixtures</span></a></li>
<li><a href='http://www.salvageinteriors.com/p/furniture_13.html'><span>Furniture</span></a></li>
<li class='last'><a href='http://www.salvageinteriors.com/p/accoutrements.html'><span>Accoutrements</span></a></li>
</ul>
</li>
<li><a href='http://www.salvageinteriors.com/p/about.html'><span>About</span></a></li>
<li><a href='http://www.salvageinteriors.com/p/clients.html'><span>Clients</span></a></li>
<li><a href='http://www.salvageinteriors.com/p/press.html'><span>Press</span></a></li>
<li><a href='http://salvageinteriors.bigcartel.com/' target='_blank'><span>Shop</span></a></li>
<li><a href='http://salvageinteriorsblog.com/' target='_blank'><span>Blog</span></a></li>
<li class='last'><a href='http://www.salvageinteriors.com/p/contact.html'> <span>Contact</span></a></li>
</ul>
</div>

Answer 1

老实说，至少在每个人都可以找到触摸设备的悬停之前，我们对这些东西都有点紧张。有两种方法可以解决这个问题：

1）将所有悬停声明放在触摸类后面，并在检测到设备启用触摸时使用Modernizr为您的body元素添加触摸类。

2）或者你可以将你的悬停声明放在一个媒体查询中，该查询的目标是超过1024px。

这些都不是很好的解决方案，但我会是第一个承认我以前使用它们的人。如果可能的话，我可能会使用Modernizr。

下载iPhone和Android的菜单

1 个答案: