javascript - 使用 jquery ui 滑出 'mobile' 类型菜单

Question

我正在尝试编写一个小脚本来将所有页面内容滑过，以显示隐藏菜单，如下面的 Facebook 移动网站中的这张图片。

我尝试使用 jquery ui slide 函数重新创建它，但不能完全让它工作，我一直在使用

$('.click').click(function() {
    $('.slider').toggle("slide", {
        direction: "right",
        distance: 100
    }, 500);
});

到一半了，但我不太清楚如何进一步，我不是想把所有的内容都滑过去，只是像上图那样只有 90%，所以你仍然可以看到主要内容的一部分，有任何想法吗 ？我在这里做了一个 jsfiddle http://jsfiddle.net/pudle/ckNx9/4/

Answer 1

给你:http://jsfiddle.net/ckNx9/6/

它涉及最初隐藏 slider ，然后允许切换显示/隐藏它，因为它滑动了 180 像素。

下面是 .slider 的修改后的 CSS。

.slider {background:blue; width: 180px; height: 200px; display: none;}