我正在开发一个小网站:
当我从Android浏览器中打开它并点击汉堡包菜单时,它不会为带有所有选项的UL元素设置动画。
它适用于任何其他浏览器/设备/屏幕尺寸,但它不会在Android浏览器上运行。
我使用的是translateX。我检查了几乎任何浏览器都支持它。该UL的位置是:固定的。
有人可以帮忙吗?这是一些代码:
<input id="cab_especial_button" type="checkbox" name="cab_especial_button">
<ul class="nav principal">
<li class="l1">
<a href="...">text
</a>
</li>
<li class="l2">
<a href="...">text</a>
</li>
</ul>
<style>
#cab_especial_button:checked ~ .nav.principal{
-webkit-transition:-webkit-transform 700ms ease;
transition:transform 700ms ease;
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
.nav.principal{
position:fixed;
top:0;
right:0;
/*right:-100%;*/
width: 40%;
background: rgba(0,0,0,.8);
padding:1em;
overflow:auto;
z-index: 20;
height: 100%;
-webkit-transition:-webkit-transform 700ms ease;
transition:transform 700ms ease;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
</style>