php - 使用 twitter bootstrap 显示左侧菜单的页面幻灯片

Question

我正在尝试模拟或找到一个插件，该插件可以将页面滑动到暴露导航菜单，例如这个twitter bootstrap 模板：

如果您调整页面大小，您将在标题行中看到将页面滑过的选项。

我查看了 javascript 代码，但看不到这是如何完成的。

我还为pageslide找到了这个 git 项目，但它会滑动整个页面。

知道这个引导页面如何为较小分辨率的设备滑出菜单吗？

Answer 1

它基本上是页面结构和一些 css3 转换/样式。

<div id="wrap">
    <div id="menu" role="navigation"></div>
    <div id="main" role="main"></div>
</div>

该页面使用媒体查询根据可用的屏幕空间设置样式并将样式 js-menu 应用于 html 元素：

打开时（缩写）：

@media screen and (max-width: 950px)
    .js-advanced.js-menu #wrap {
        -webkit-transform: translate3d(280px, 0, 0);
    }

关闭时（缩写）：

@media screen and (max-width: 950px)
    .js-advanced #wrap {
        -webkit-transition: -webkit-transform 500ms ease;
        -webkit-transform: translate3d(0, 0, 0);
    }

在这种情况下，整个#wrap 元素被转移。

我为一个非常简单/精简版的页面创建了一个要点，该页面对新旧浏览器都有基本支持。我没有添加媒体查询支持。可以通过诸如respondjs 之类的库为旧版浏览器添加媒体查询支持。

Answer 2

您可以尝试使用最新的 jquerymobile (1.3.0) 中的 then 面板小部件。也许这不是您想要的，但有一些选项可以让您以编程方式进行。http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/panel-fixed.html