我的桌面上有一个html页面,在悬停时使用垂直滑动菜单。在iPad上,我可以单击菜单将其展开,但我无法弄清楚如何使其崩溃。我尝试过使用jquery但我似乎无法使其工作。这是我开始使用的代码。
#navigation_slideout {
position: fixed;
top: 80px;
left: -370px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
}
#navigation_slideout:hover {
left: -39px;
}
#navigation_slideout ul
{
list-style: none;
}
#navigation_slideout ul li {
background: #548EBE;
width: 325px;
height: 30px;
text-align: left;
padding-top: 5px;
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#navigation_slideout ul li a{
color: #000;
text-decoration: none;
font-weight:bold;
display: block;
background-color:#548EBE;
color:white;
}
#navigation_slideout ul li ul{
width:285px;
}
#navigation_slideout ul li ul li {
width:10px;
position:relative;
left:-41px;
}
#navigation_slideout ul li ul li a {
background:#548EBE;
width:326px;
height:30px;
text-align:left;
padding-top:5px;
font-family: helvetica, arial, sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#menu{
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14pt;
color:white;
font-weight:bold;
margin:0px 0px 0px 0px;
right:0px;
padding:0px 0px 0px 0px
}
#menu a{
font-size: 14pt;
color:white;
font-weight:bold;
text-decoration:none;
}
table.nospacing {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
table.nospacing th, td {
padding: 0;
}
.menu-col{max-width: 30px;}
<div id="navigation_slideout" style="background-color:#548EBE;z-index:1" >
<table class="nospacing" style="border-style:none">
<tr>
<td>
<ul>
<li><a href="default.html"> Home</a></li>
<li><a href="about/default.html"> About</a></li>
<li><a href="contact/default.html" > Contacts</a></li>
<li><a href="faq/default.html" > FAQs</a></li>
</ul>
<hr width="200px"/>
<ul>
<!-- #BeginEditable "redlines" -->
<li style="display:none"><a href="#"> Redlines</a></li>
<!-- #EndEditable -->
</ul>
</td>
<td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid"><p id="menu"><a href="#">MENU</a></p></td>
</tr>
</table>
答案 0 :(得分:0)
iDevices有一个奇怪的事情,悬停状态持续存在。我通过添加悬停类来修复此问题。如果你正在使用jquery,你可以这样做......
elem.on('mouseenter', function () {
$(this).addClass('hover');
}
elem.on('mouseleave', function () {
$(this).removeClass('hover');
}
还有其他修复方法......
http://davidwalsh.name/ios-hover-menu-fix
http://www.slickmedia.co.uk/news/blog/glenns-blog/fix-ipad-iphone-css-hover-issues/