像JQuery Mobile这样的Javascript菜单

Question

I'm working with Firefox OS, on customer requirements I can not use frameworks for JavaScript (like JQuery), ie everything must be html, css and JS.

I have to do the pull-down menu with the same side effect of "pushing the page" ( this one ) we've seen in JQuery Mobile.

They know how I can do this effect?

Thanks a lot

Answer 1

A basic way of doing this is to create a div box (page) and set a z-index lower than the main page so its always behind the main page. Then using css you can move the main page up and down to reveal the page behind.

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

Demo

http://jsfiddle.net/cut3y0sq/