使用twitter引导程序显示左侧菜单的页面幻灯片
page slide for exposing left menu with twitter bootstrap
我正在尝试模拟或找到一个插件,它可以在页面上滑动,从而显示导航菜单,如以下twitter引导模板:
如果调整页面大小,您将在标题行中看到将页面滑动到上方的选项。
我已经浏览了javascript代码,但没有看到这是如何实现的。
我也发现了这个git项目的页面幻灯片,但它幻灯片的整个页面。
你知道这个引导页面是如何为分辨率较小的设备滑出菜单的吗?
它基本上是页面结构和一些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元素正在被转移。
我为一个非常简单/精简的页面版本创建了一个要点,该版本对新浏览器和一些旧浏览器都有基本支持。我没有添加媒体查询支持。可以通过responsdjs等库为旧浏览器添加媒体查询支持。
您可以尝试使用最新jquerymobile(1.3.0)中的then-panel小部件。也许这不是您想要的,但有一些选项可以通过程序实现。http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/panel-fixed.html
相关文章:
- JQuery.animate()菜单幻灯片返回
- 如何使用JQuery制作此菜单幻灯片
- .net幻灯片菜单
- 单击选项卡时要关闭的幻灯片菜单
- 如何使幻灯片菜单始终打开
- 单击窗口时,幻灯片菜单会重新移动
- 如何在应用程序中隐藏幻灯片菜单
- 幻灯片菜单Javascript不工作
- 两个大幻灯片菜单可以放在一个页面上吗?
- 弹跳幻灯片菜单与Jquery
- 顶部幻灯片菜单问题
- Javascript/ Jquery幻灯片菜单不工作在Chrome浏览器
- 什么是导致链接不工作与navgoco幻灯片菜单
- 如何使这个幻灯片菜单工作
- 如何添加";慢效应";当从左边滑出时转到我的幻灯片菜单
- 幻灯片菜单没有'不起作用
- 幻灯片菜单与引导程序相结合
- 移动幻灯片菜单可滚动
- 你如何创建这个jquery幻灯片菜单效果
- 如何用jQuery创建幻灯片菜单(从右到左/从左到右)