1

运行演示的 jsFiddle 链接：http: //jsfiddle.net/dahAG/

为了使此悬停菜单在触摸设备上兼容，它需要具有在触摸设备上按下打开菜单后折叠菜单的功能，方法是允许用户（在触摸设备上）按屏幕上的任意位置菜单。目前，在触摸设备上，打开菜单后折叠菜单的唯一方法是再次按下菜单。实现这一目标的最佳方法是什么？

这个悬停菜单只使用 CSS3 过渡效果，没有 JavaScript——但如果这是首选方法，我很乐意集成一些。


HTML

<section onclick="">
    <nav class="menu left" aria-haspopup="true" aria-controls="p1"><img src="images/submenu.gif" alt="">
        <ul id="p1">
            <li class="current"><a href="index.html">Products</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Services</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Demonstrations</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Menus</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Layouts</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Contact</a><b></b></li>
            <li class="last" aria-haspopup="false"><a href="index.html">Privacy</a><b></b></li>
        </ul>
    </nav>
</section>


CSS

@media only screen and (max-width:880px) {
    .menu {
        width:200px;
        }
    .menu.center {
        margin:0 auto;
        text-align:left;
        }
    .menu.right {
        margin:0 0 0 auto;
        text-align:left;
        }
    .menu img {
        display:block;
        }
    .menu ul li {
        display:block;
        margin-bottom:-40px;
        -webkit-transition:0.5s;
        -moz-transition:0.5s;
        -o-transition:0.5s;
        transition:0.5s;
        }
    .menu ul li:last-child {
        margin-bottom:0;
        }
    .menu ul li.current {
        display:block;
        z-index:10;
        }
    .menu:hover ul li {
        margin-bottom:0;
        }
    }
4

0 回答 0