页幻灯片

我试图模仿或发现了露出这样twitter bootstrap template导航菜单滑动页面插件：如果您调整页面大小，你会看到选项页幻灯片

在标题行中滑动页面。

我已经看过javascript代码，但没有看到这是如何完成的。

我还发现这个git项目为pageslide，但它滑动整个页面。

任何想法如何将这个引导页面滑出菜单为较小的分辨率设备？

2013-07-23 Paul

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

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

该页面使用媒体查询基于可用的屏幕房地产和应用样式JS菜单的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元件是贝ng转移了过来。

我已经创建了一个页面的simple/stripped down version的要点，该页面基本支持较新的和一些较旧的浏览器。我没有添加媒体查询支持。媒体查询支持可以通过库如respondjs为较旧的浏览器添加。

来源

2013-07-23 23:41:10 dc5

@dcp感谢您的信息...现在开始做出更有意义的感觉 – Paul

这看起来对于旧版浏览器来说不是一个好的解决方案...我是否正确？ – Paul

正确 - 为了支持旧版本的浏览器，您需要使用一个类来操作左/右/等，而不是使用转换，如果动画对于这些浏览器来说很重要，可以使用库或者自己实现。您可能还需要根据退出的距离来检测可用宽度/高度的变化，或者只是称之为足够好。 – dc5

您可以尝试使用最新的jquerymobile（1.3.0）中的面板小部件。也许这不是你想要的，但有选择，所以你可以编程方式。 http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/panel-fixed.html

来源

2013-07-23 23:28:48

回答

相关问题