转载

发表于 2015年08月10日
浏览 (853)
评论 (0)

基于Bootstrap3的响应式Offcanvas菜单界面布局

简要教程简要教程这是一款基于Bootstrap3.x的响应式Offcanvas菜单界面布局特效。该界面布局在大屏幕设备上，菜单显示为正常的顶部菜单。在小屏幕设备中，菜单会收缩为下拉菜单，在点击主菜单按钮后，菜单面板从屏幕左边被推出来，效果非常的炫。这是一款基于Bootstrap3.x的响应式Offcanvas菜单界面布局特效。该界面布局在大屏幕设备上，菜单显示为正常的顶部菜单。在小屏幕设备中，菜单会收缩为下拉菜单，在点击主菜单按钮后，菜单面板从屏幕左边被推出来，效果非常的炫。

基于Bootstrap3的响应式Offcanvas菜单界面布局

查看演示下载插件

使用方法

使用方法

原生的Bootstrap为小屏幕设备的导航菜单使用.navbar-toggle来制作Offcanvas菜单。该插件为.navbar-collapse.collapse默认设置决定定位，然后在小屏幕中将其修改为相对定位。当用户切换.navbar-toggle的时候，插件简单的添加.in class，并且left css属性是被调整过的。原生的Bootstrap为小屏幕设备的导航菜单使用.navbar-toggle来制作Offcanvas菜单。该插件为.navbar-collapse.collapse默认设置决定定位，然后在小屏幕中将其修改为相对定位。当用户切换.navbar-toggle的时候，插件简单的添加.in class，并且left css属性是被调整过的。在屏幕尺寸大于768像素的时候，插件会将.in class移除。在屏幕尺寸大于768像素的时候，插件会将.in class移除。

$('document').ready(function () {
$('.navbar-toggle').on('click', function () {
$('.collapse, #mainContainer').toggleClass('in');
});
});
$(window).resize(function () {
if ($(window).width() > 768) {
$('.collapse, #mainContainer').removeClass('in');
};
});

复制代码

基于Bootstrap3的响应式Offcanvas菜单界面布局

CSS样式

CSS样式

下面的菜单的默认样式，但添加了.in class的时候，可以使用CSS3的transition属性来使它产生动画。下面的菜单的默认样式，但添加了.in class的时候，可以使用CSS3的transition属性来使它产生动画。

.navbar-collapse.collapse {
border: none;
display: block;
background: #151515;
position: absolute;
left: -100%;
top: 70px;
width: 80%;
max-height: none;
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
}
.navbar-collapse.collapse.in {
left: 15px;
}

复制代码

下面是该菜单的媒体查询样式。下面是该菜单的媒体查询样式。

@media (min-width: 768px) {
.navbar-collapse.collapse {
width: auto;
background: none;
position: relative;
left: auto;
top: auto;
padding: 0px;
margin: 25px 0 35px 50px;
}

复制代码

本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/jQuery/Menu-Navigation/201508072372.html

正文到此结束

所属分类：编程技术

本文标签： 代码 Menu CSS Bootstrap UI 插件 jquery Document HTML web 响应式
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

热门推荐

openfire数据库安装指南

浏览(14,002) 评论(0)
Caffe 深度学习框架上手教程

浏览(10,666) 评论(0)
ReactiveCocoa入门教程：第一部分

浏览(11,496) 评论(0)
开源HIDS-OSSEC使用实例:监测CC攻击

浏览(11,411) 评论(0)
Decorators in ES7

浏览(15,951) 评论(4)
用Electron（Atom编辑器的兄弟项目）开发桌面应用

浏览(28,964) 评论(0)
Windows下JetBrains CLion中文输出乱码的解决方法

浏览(12,422) 评论(1)
同步-@synchronized, NSLock, pthread, OSSpinLock性能比较

浏览(11,368) 评论(0)
Seaweedfs之Volume读请求重定向

浏览(25,669) 评论(3)
HTML、CSS及JavaScript ：有Promise，不会搞大肚子

浏览(13,507) 评论(0)

相关文章

阿里云首购8折

Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号

HBLOG

HBLOG