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

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

使用方法

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

在屏幕尺寸大于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');
    };
});                
              

CSS样式

下面的菜单的默认样式，但添加了.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;
}