Question

我使用了一个关于创建3D下翻子菜单的教程。

此处找到的文件：

翻转向下菜单（Zip文件） http://www.webdesignermag.co.uk/tutorial-files/issue-217-tutorial-files/

我修改了我的用法，效果很好。

以下是代码：

<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;
}

当盘旋时，它翻转下来，当盘旋翻转时。

在桌面上它运行良好。

在触摸设备上，菜单会向下翻转，但为了使其向上翻转，您必须在主链接外触摸。

目标：

让它与触控设备配合使用。点击＆＃34;菜单＆＃34;将放下子菜单。点击相同的主菜单＆＃34;菜单＆＃34;项目会将其翻转。

非常感谢任何有触摸设备的帮助或潜在客户。

谢谢。

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);
}

这是demo：http://jsfiddle.net/yx8qc/7/

这将只使用标签激活复选框，并在其状态显示或隐藏内容的功能。

3D转换翻转CSS子菜单

1 个答案: