JQuery实现侧边栏菜单

这次给大家带来JQuery实现侧边栏菜单，JQuery实现侧边栏菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

效果图如下：

在线预览    源码下载

html代码：

  
 

 

  

   

   

    

     
点击左上角的按钮打开菜单
     
适用浏览器：、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 
不支持IE及以下浏览器。
     

     
    
    

   

  

 

js代码：

var paperMenu = {
   $window: $('#paper-window'),
   $paperFront: $('#paper-front'),
   $hamburger: $('.hamburger'),
   offset: ,
   pageHeight: $('#paper-front').outerHeight(),
   open: function () {
    this.$window.addClass('tilt');
    this.$hamburger.off('click');
    $('#container, .hamburger').on('click', this.close.bind(this));
    this.hamburgerFix(true);
    // console.log('opening...');
   },
   close: function () {
    this.$window.removeClass('tilt');
    $('#container, .hamburger').off('click');
    this.$hamburger.on('click', this.open.bind(this));
    this.hamburgerFix(false);
    // console.log('closing...');
   },
   updateTransformOrigin: function () {
    scrollTop = this.$window.scrollTop();
    equation = (scrollTop + this.offset) / this.pageHeight * ;
    this.$paperFront.css('transform-origin', 'center ' + equation + '%');
   },
   hamburgerFix: function (opening) {
    if (opening) {
     $('.hamburger').css({
      position: 'absolute',
      top: this.$window.scrollTop() + + 'px'
     });
    } else {
     setTimeout(function () {
      $('.hamburger').css({
       position: 'fixed',
       top: 'px'
      });
     }, );
    }
   },
   bindEvents: function () {
    this.$hamburger.on('click', this.open.bind(this));
    $('.close').on('click', this.close.bind(this));
    this.$window.on('scroll', this.updateTransformOrigin.bind(this));
   },
   init: function () {
    this.bindEvents();
    this.updateTransformOrigin();
   }
  };
  paperMenu.init();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Bootstrap侧边栏后台菜单代码

Bootstrap侧边栏后台菜单代码是一款基于bootstrap和图标库制作的侧边栏菜单后台管理页面特效。

下载

jQuery实现表单里文字按钮特效合集

jquery实现带复选框表格步骤详解