Javascript Menu like JQuery Mobile

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

Tasos · Accepted Answer · 2014-12-04 03:30:05Z

2

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/

edited Dec 4, 2014 at 3:30

answered Dec 4, 2014 at 0:07

Tasos

5,3491 gold badge17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omar Over a year ago

Nice one. But make sure it works with fixed elements like toolbars. Fixed elements lose their position when transition is applied to their parent/wrapping div.

Tasos Over a year ago

That's true, fixed position opens a new can of worms. You could get around it by having data-position:fixed with a style of position:absolute and have a wrapper as the main content. scroll performance looks ok at least on chrome for Android. I guess in a webview it might it not be as good, but i need to check. Demo jsfiddle.net/uajhbfa8

Collectives™ on Stack Overflow

Javascript Menu like JQuery Mobile

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related