css - 3D 变换向下翻转 CSS 子菜单

Question

我使用了有关创建 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;
}

悬停时它向下翻转，悬停时向上翻转。

在桌面上效果很好。

在触摸设备上，菜单向下翻动，但为了让它向上翻动，您必须触摸主链接以外的地方。

目标:

让它与触摸设备一起工作。点击“菜单”将下拉子菜单。点击相同的主“菜单”项会将其翻转回来。

非常感谢任何有关触摸设备的帮助或线索。

谢谢。

Answer 1

这个有用吗？我这里没有任何触摸设备。

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/

这将简单地使用标签来激活复选框，并根据其状态显示或隐藏内容。