Итак ...
Предполагая, что (уродливая) разметка:
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div>
<div>
<div></div>
<div></div>
</div>
</div>
</body>
Два последних div - это ваше меню и ваш контент.
Затем 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;
}
Это довольно просто (даже если это может показаться непростым):
первый div на 100% и переполнение: скрыто.это предотвратить свиток.Тело должно использоваться для этого, но странность iOS предотвращает это.
второй div - это большой контейнер, который будет содержать два плавающих
div.Этот более крупный контейнер переводится.
третьи элементы - это ваше меню и содержимое, всплывающее.
Я рассчитал% на лету, вывозможно, придется настроить их.
Затем немного jQuery, чтобы проверить его:
<script>
$(document).on('touchstart', function()
{
$("body > div > div").addClass("hover");
});
</script>
Вы не должны использовать событие touchstart, оно только для демонстрационных целей.
Протестировано на iOS 5.1 и Android 2.3.