Menu Mobile Toggle - How to bring content out of the viewport?
I am working on a mobile layout and came across the following question.
It is rather "there is a generally accepted term for what I describe." Hoping to find tutorials / explanations regarding this method - is there a common name for the following menu layout / switch column script?
Essentially, once the toggle menu is displayed, the original site content is slid to the right, partially out of the viewport, and the toggle menu is displayed.
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 compilation is needed in order to scroll / pop the original content out of the viewport this way?
All information, conventions, demos or short explanations are welcome! Thank!
source to share
So...
Assuming this (ugly) markup:
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div>
<div>
<div></div>
<div></div>
</div>
</div>
</body>
The last two divs 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 pretty simple (even if it might sound simple):
-
the first div is 100% and overflow: hidden. it prevents scrolling. the body should be used for this, but the iOS exception prevents this.
-
the second div is the larger container that will hold the two floating
cases. This larger container is being translated. -
The third section is your menu and content floating.
I calculated the% on the fly, you might have to tweak it.
Then a little bit of your jquery to test it:
<script>
$(document).on('touchstart', function()
{
$("body > div > div").addClass("hover");
});
</script>
You shouldn't use the touchstart event, this is for demonstration purposes only.
Tested on iOS 5.1 and Android 2.3.
source to share