像JQuery Mobile这样的Javascript菜单

Question

我正在使用Firefox OS，但根据客户要求，我无法使用JavaScript框架（如JQuery），即所有内容都必须为html，css和JS。

我必须做下拉菜单，其副作用与我们在JQuery Mobile中看到的“推页面”（ 这一点 ）相同。

他们知道我该怎么做？

非常感谢

Answer 1

一种基本方法是创建一个div框（页面），并将z-index设置为低于主页，以便使其始终位于主页之后。 然后，使用css可以上下移动主页以显示后面的页面。

的CSS

#page {
    z-index: 999;
    width:100%;
    height:100%;
    background-color:white;
    position:fixed;
    top:0;
    left: 0;
    -webkit-transition: all .5s ease;
}

.box {
    position:fixed;
    top:0;
    left: 0;
    height:100%;
    background-image: linear-gradient(#ddd, #ccc);
    width: 100%;
    display: block;
    z-index:1;
}

.move {
    top: 0em;
    margin-top:10em;
}
.moveb {
    top: 0em;
    margin-top:0em;
}

的JavaScript

function doMove() {
 var element = document.getElementById("page");
 element.classList.remove("move");
 element.classList.remove("moveb");
 element.classList.add("move");
}

function doMoveb() {
 var element = document.getElementById("page");
 element.classList.remove("move");
 element.classList.remove("moveb");
 element.classList.add("moveb");
}      

演示版

http://jsfiddle.net/cut3y0sq/