html+左侧和侧栏框架,左侧滑动.html

dodou-移动框架

.popleft{

z-index: 100;

}

.popleft,.popleft .close-popleft,.popleft .content-popleft{

position: fixed;

bottom: 0;

left: 0;

right: 0;

height: 0;

width: 100%;

height: 100%;

z-index: 10;

-webkit-tap-highlight-color: transparent;

}

.popleft .close-popleft{

background-color: rgba(0, 0, 0, 1);

opacity: .7;

-webkit-transition: opacity .3s;

transition: opacity .3s;

}

.popleft .close-popleft span{

position: fixed;

right: 10%;

top: 50%;

-webkit-transform:translate(0,-50%);

width: 15px;

font-size: 14px;

line-height: 14px;

color: #B5B5B5;

}

.popleft .close-popleft i{

display: block;

width: 15px;

height: 15px;

margin: 10px 0 0;

background-repeat: no-repeat;

background-position: center center;

background-size: 100%;

background-image:url(images/return.png);

}

.popleft .content-popleft{

position: fixed;

top: 0;

left: 0;

z-index: 20;

overflow: hidden;

width: 80%;

background:#fff;

-webkit-box-shadow: 6px 0 10px 0 rgba(0,0,0,.4);

box-shadow: 6px 0 10px 0 rgba(0,0,0,.4);

-webkit-transition: -webkit-transform .5s cubic-bezier(.165,.84,.44,1);

transition: transform .5s cubic-bezier(.165,.84,.44,1);

transform:translateX(-100%);

}

显示左侧导航

点击此处返回

导航信息

//开启

function LeftOpen(){

$('.popleft').css({

"display":"block"

});

setTimeout(function(){

$('.content-popleft').css({

"transform":"translateX(0)"

});

},100);

}

//关闭

function LeftClose(){

$('.content-popleft').css({

"transform":"translateX(-100%)"

});

setTimeout(function(){

$('.popleft').css({

"display":"none"

});

},600);

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史