我使用了有关创建 3D 向下翻动子菜单的教程。
在这里找到的文件:
上下翻动菜单(Zip 文件) http://www.webdesignermag.co.uk/tutorial-files/issue-217-tutorial-files/
我修改了我的用法并且效果很好。
这是 fiddle : http://jsfiddle.net/yx8qc/6/
代码如下:
<div class="menu_holder">
<ul class="nav">
<li class="main_menu"><a href="#">MENU</a>
<div class="sub">
<ul><li><a href="#">Home</a></li>
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
</ul> </div>
</li>
</ul>
</div>
这是CSS
.menu_holder {
background-color: #bd4832;
text-align: center;
-moz-perspective: 80px;
-webkit-perspective: 80px;
-o-perspective: 80px;
perspective: 80px;
position: fixed;
right: 0;
top: 0;
height: 64px;
z-index: 900;
width: 100%;
}
.menu_holder ul {
padding: 0;
margin: 0;
}
.menu_holder a {
color: #fff;
font-family:'League Gothic', sans-serif;
font-size: 2em;
font-weight: normal;
}
.menu_holder ul li {
display: inline;
}
.main_menu {
width: 100%;
}
ul.nav li a {
display: inline-block;
padding: 0 1em;
letter-spacing: 2px;
}
.menu_holder ul.nav {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.sub {
}
.menu_holder ul.nav div {
width: 100%;
position:absolute;
background-color: #d3634e;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
/* inner shadow */
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
/* inner shadow */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
/* inner shadow */
}
.menu_holder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.menu_holder ul.nav li:hover > a {
color:#115b64;
}
.menu_holder ul.nav div.sub {
width: 100%;
display: block;
}
悬停时它向下翻转,悬停时向上翻转。
在桌面上效果很好。
在触摸设备上,菜单向下翻动,但为了让它向上翻动,您必须触摸主链接以外的地方。
目标:
让它与触摸设备一起工作。点击“菜单”将下拉子菜单。点击相同的主“菜单”项会将其翻转回来。
非常感谢任何有关触摸设备的帮助或线索。
谢谢。
最佳答案
这个有用吗?我这里没有任何触摸设备。
HTML
<div class="menu_holder">
<ul class="nav">
<li class="main_menu"><a href="#"><label for="toggle-1">MENU</label></a>
<input type="checkbox" id="toggle-1">
<div class="sub">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">ONE</a>
</li>
<li><a href="#">TWO</a>
</li>
<li><a href="#">THREE</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS(你的 + 这个)
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
cursor: pointer;
}
input[type=checkbox]:checked ~ div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
这是演示:http://jsfiddle.net/yx8qc/7/
这将简单地使用标签来激活复选框,并根据其状态显示或隐藏内容。
关于css - 3D 变换向下翻转 CSS 子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22418215/