本文实例为大家分享了html5实现侧滑页面效果展示的具体代码，供大家参考，具体内容如下

before：

after：

代码：

.cover {

background-color: #0062CC;

height: 100%;

width: 100%;

display: none;

opacity: 0;

position: absolute;

}

.mui-off-canvas-left {

background-color: #F0AD4E;

}

侧滑页面

标题

主页面

$('.mui-pull-left').click(function() {

mui('.mui-off-canvas-wrap').offCanvas('show');

$('.cover').css('display', 'block');

});

$('.cover').click(function() {

mui('.mui-off-canvas-wrap').offCanvas('close');

$('.cover').css('display', 'none');

});