Question

我正在制作移动版面，并遇到了以下问题。

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

Screenshot of my layout description

基本上，一旦显示切换菜单，网站的原始内容将被推向右侧，部分位于视口之外，并显示切换菜单。

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

非常感谢任何信息，普遍接受的术语，演示或简要说明！谢谢！

Answer 1

因此...

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

<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％而溢出：隐藏。它阻止滚动。该应该使用body来做这件事，但是一个iOS奇怪的事情阻止了这一点。
第二个div是一个更大的容器，将容纳两个浮动的
DIV。这个更大的容器已被翻译。
第三个div是您的菜单和内容，浮动。

我在飞行中计算了％，你可能需要调整它们。

然后，有点你的jquery来测试它：

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

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

在iOS 5.1和Android 2.3上测试。

Answer 2

我不确定这对你有什么用处，但是有一个jQuery插件可以执行类似于你所描述的内容。

http://srobbin.com/jquery-plugins/pageslide/

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

2 个答案: