Jquery 移动切换菜单-如何将内容推送到视口视图之外？

我正在做一个移动布局，遇到了以下问题

这更像是一个“我所描述的东西是否有一个普遍接受的术语”的问题。希望能找到关于此方法的教程/解释-以下布局/切换菜单列场景是否有一个普遍接受的名称

基本上，一旦显示切换菜单，站点的原始内容就会向右推，部分地从视口中移出，并显示切换菜单

这个方法有名字吗？我不知道如何描述这一点，以便找到关于最佳实践的资源？另外，有没有人知道需要什么类型的CSS/jQuery组合才能以这种方式滚动/推送视口中的原始内容

非常感谢您提供任何信息、常用术语、演示或简短解释！

---

谢谢

我不确定这是否对您有用，但是有一个jQuery插件，它的功能与您描述的类似

所以

假设这个（丑陋的）标记：

这很简单（即使看起来不简单）：

第一个div为100%，溢出：隐藏。它会阻止滚动。这个 应该使用body来实现这一点，但iOS的奇怪之处阻止了这一点

第二个div是一个较大的容器，用于容纳两个浮动的容器
div.这个较大的容器被翻译

第三个div是浮动的菜单和内容

我在运行中计算了百分比，您可能需要调整它们

然后，对jquery进行一点测试：

<script>
$(document).on('touchstart', function()
{
    $("body > div > div").addClass("hover");
});
</script>

$（文档）.on（'touchstart'，函数（）
{
$（“body>div>div”）.addClass（“hover”）；
});

您不应该使用touchstart事件，它仅用于演示目的

---

在iOS 5.1和Android 2.3上进行测试。

根据您需要的具体行为，有不同的方法可以实现这一点：打开菜单时，您想要水平滚动还是将视口保持在100%？很好的问题-抱歉，我忘了提到我不想要水平滚动条。我希望视口保持在100%，再次查看主要内容的主要方式是简单地切换菜单以再次隐藏。这太神奇了！正是我想要描述的-非常感谢！！哇，太谢谢你了！你是救命恩人。在这样的一个例子中，看到不同的技术结合在一起，这是非常有帮助的。在你回答如何在我自己身上实现类似的东西之前，我有点不知所措。现在我只需要决定是使用这个自定义解决方案还是其他用户建议的Pageslide插件。谢谢你！只是一个精度：您可能需要删除所有高度：100%，它们只是作为示例，因为div是空的。谢谢提醒。我从您的示例代码中收集了一个演示，100%的高度使事情在没有任何内容的情况下也能明显地“工作”，这是一个很好的临时示例解决方案：）

*
{
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;
}

<script>
$(document).on('touchstart', function()
{
    $("body > div > div").addClass("hover");
});
</script>