当前位置:JS特效 » 菜单导航 » 超酷Bootstrap 3 隐藏滑动侧边栏菜单
 超酷Bootstrap 3 隐藏滑动侧边栏菜单
如果您觉得内容不错,请分享:

插件介绍

这是一款基于Bootstrap3的炫酷隐藏滑动侧边栏菜单特效。该隐藏侧边栏通过汉堡包按钮来打开和关闭侧边栏菜单,并通过CSS3来制作平滑的过渡动画效果,整体效果非常炫酷。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:35
简要教程

这是一款基于Bootstrap3的炫酷隐藏滑动侧边栏菜单特效。该隐藏侧边栏通过汉堡包按钮来打开和关闭侧边栏菜单,并通过CSS3来制作平滑的过渡动画效果,整体效果非常炫酷。

使用方法

在页面中引入bootstrap的相关文件,以及侧边栏菜单的样式文件style.css文件。




   
                
HTML结构

侧边栏的HTML结构如下:


                 
初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来为汉堡包按钮添加相应的交互事件,以及为侧边栏的打开和关闭添加和移除相应的class类。

$(document).ready(function () {
  var trigger = $('.hamburger'),
      overlay = $('.overlay'),
     isClosed = false;

    trigger.click(function () {
      hamburger_cross();      
    });

    function hamburger_cross() {

      if (isClosed == true) {          
        overlay.hide();
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
      } else {   
        overlay.show();
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
      }
  }
  
  $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
  });  
});
                 
Top