个人中心
gpt4 book ai didi

jquery - 移动切换菜单 - 如何将内容推送到视口(viewport) View 之外？

转载 作者：行者123 更新时间：2023-11-28 09:29:08 25 4
gpt4 key购买 nike

我正在研究移动布局并遇到以下问题。

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

Screenshot of my layout description

基本上，一旦显示切换菜单，网站的原始内容就会被推到右侧，部分超出视口(viewport)，并显示切换菜单。

这个方法有名字吗？我不确定如何描述这一点以便找到有关最佳实践的资源？此外，对于以这种方式将原始内容滚动/推出视口(viewport)需要哪种类型的 CSS/jQuery 组合，是否有人有任何想法？

非常感谢任何信息、普遍接受的术语、演示或简短解释!谢谢!

最佳答案

所以...

假设这个(丑陋的)标记:

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

这很简单(即使它看起来并不简单):

  1. 第一个 div 为 100% 并且 overflow:hidden。它阻止滚动。这body 应该用于执行此操作，但 iOS 的一个奇怪之处阻止了此操作。

  2. 第二个 div 是一个更大的容器，可以容纳两个 float 元素
    分区这个更大的容器是翻译的。

  3. 第三个 div 是 float 的菜单和内容。

我即时计算了百分比，您可能需要调整它们。

然后，使用您的 jquery 来测试它:

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

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

在 iOS 5.1 和 Android 2.3 上测试。

关于jquery - 移动切换菜单 - 如何将内容推送到视口(viewport) View 之外？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9911829/

25 4 0
文章推荐： jquery - 对 jQuery/Javascript 中的元素应用 CSS 规则后的事件
文章推荐： javascript - 在 IE 10 浏览器中，链接按钮出现错误 __dopostback is undefined
文章推荐： css - ZKOSS - 创建新的 CSS 主题
文章推荐： css - Internet Explorer 8 中生成内容的文本对齐