Mobile Toggle Menu - How to Push Content outside the view of the viewport?

Tags: jquery,css,mobile

Problem :

I'm working on a mobile layout and came across the following question.

This is more of a "is there a commonly accepted term for what I'm describing" question. In the hopes of finding tutorials / explanations regarding this method - is there a commonly accepted name for the following layout / toggle menu column scenario?

Screenshot of my layout description

Essentially once the toggle menu is shown the original content of the site is pushed to the right, partially out of the viewport, and the toggle menu is shown.

Does this method have a name? I'm not sure how to describe this in order to find resources on best practices? Also, does anyone have any ideas on what type of CSS / jQuery combo would be necessary in order to scroll/push the original content off of the viewport in this way?

Any information, commonly accepted terms, demos, or brief explanations are greatly appreciated! Thanks!

Solution :


Assuming this (ugly) markup :

<meta name="viewport" content="width=device-width, initial-scale=1">

The two last div are your menu and your content.

Then, the CSS :

margin : 0;
padding : 0;

html, body
    width : 100%;
    height : 100%;

body > div
    width : 100%;
    max-width : 100%;
    height : 100%;
    overflow : hidden;

body > div > div
    width : 200%;
    height : 100%;
    -webkit-transform : translate(-40%);
    -webkit-transition : -webkit-transform 1s linear;

    body > div > div.hover
         -webkit-transform : translate(0%);

body > div > div > div
    float : left;
    height : 100%;

body > div > div > div:first-child
    width : 40%;
    background : red;
body > div > div > div:first-child+div
    width : 50%;
    background : blue;

It's quite simple (even if it may not seems simple) :

  1. a first div at 100% and overflow:hidden. it prevent the scroll. The body should be used to do this, but an iOS oddity prevents this.

  2. the second div is a larger container who will hold the two floated
    div. This larger container is translated.

  3. the third divs are your menu and content, floated.

I calculated the % on the fly, you may have to tweak them.

Then, a bit your jquery to test it :

$(document).on('touchstart', function()
    $("body > div > div").addClass("hover");

You should not use the touchstart event, it's only for demo purposes.

Tested on iOS 5.1 and Android 2.3.

    CSS Howto..

    how to make nav brand centrally aligned

    How can I apply CSS to an HTML text input?

    How to repeat a menu without using iFrames or PHP in simple HTML/CSS or XML?

    How to re-size a box with CSS or Javascript

    How to achieve a CSS footer “curtain” effect?

    How to change css classes with a button click in javascript?

    Responsive layout, how to keep text at bottom of dynamically resizing image

    How to find class =“class1” included class=“class2” in CSS? [closed]

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How can I convert this from jQuery to vanilla JS?

    How can I change the image folder name in css files dynamically?

    How to get Bootstrap grid spans narrower than span1?

    How to find if a request is for js or css in httpHandler

    How to use CSS to adjust HTML5 validation indicator

    How to accurately position divs with css

    How to move object into the screen from outside via jQuery transition

    How to dynamically change element alignment?

    CSS: How to shadow a field like this? [closed]

    How to do “display = block” using jquery for particular element

    How to flip which side a progress bar begins at with CSS

    How i can force my div to display in block?

    How to create a tiled background button using CSS

    CSS menu list items need to show inside div container

    how to add an image on a div without losing previous content in CSS hover effect

    How to force Visual Studio to honor the BOM at the start of a UTF-8 encoded CSS file?

    how to change height of ellipse in radial gradient in css for background property

    How to retrieve sibling content in jquery?

    how to stack elements using CSS

    How can I align two icons on my webpage next to each other?

    How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?