转载

发表于 2015年08月10日
浏览 (827)
评论 (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

正文到此结束

所属分类：编程技术

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

热门推荐

openfire数据库安装指南

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

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

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

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

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

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

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

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

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

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

相关文章

阿里云首购8折

Loading...

其他链接

关于本站

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

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

问题交流

[HBLOG]公众号

HBLOG

HBLOG