JQuery Mobile과 같은 Javascript 메뉴

Question

고객 요구 사항에 따라 Firefox OS를 사용하고 있습니다. JQuery와 같은 JavaScript 용 프레임 워크를 사용할 수 없습니다. 즉, 모든 것이 HTML, CSS 및 JS 여야합니다.

우리는 JQuery Mobile에서 본 "pushing the page"(this one)와 동일한 부작용으로 풀다운 메뉴를 작성해야합니다.

그들은이 효과를 어떻게 낼 수 있는지 알고 있습니까?

덕분에 많은

Answer 1

이 일을하는 기본적인 방법은 사업부 상자 (페이지)를 만들고 그 항상 메인 페이지 뒤에 있도록 메인 페이지보다 낮은 Z- 인덱스를 설정하는 것입니다. 그런 다음 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; 
} 

자바 스크립트

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/