jquery手机端菜单左侧滑出效果代码-html代码-BFW代码库

jquery手机端菜单左侧滑出效果代码

代码语言：html

代码描述：jquery手机端菜单左侧滑出效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    * { margin: 0px; padding: 0px; }
body {
        background: #383c55;
        width: 100%; 
        height: 100%;
        font:12px "Open Sans", sans-serif; 
}
#wrapper{
        width:320px;
        height:560px;   
        overflow:hidden;
        position:absolute; 
        top:18px; 
        left:50%;
  margin-left:-160px;
        background:#111;
}
div.screen{
        width:320px;
        height:560px;   
        overflow:hidden;
        position:absolute; 
        top:0px; 
        left:0px;
        background:#31558a;
        -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
             -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
                transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
}
div.screen.animate{
        left:254px;
        -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
             -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
                transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
}

.list{margin-top:36px; text-align:left;}
.item{
        height:115px;
        margin-top:30px 0;
        padding-left:115px;
        clear:both;
}
.item .img, .item span{background:#214273; border-radius:3px;}
.item .img{float:left; width:71px; height:71px; margin-left:-93px;}
.item span{height:11px; width:180px; margin-bottom:19px; float:left;}
.item span:nth-.........完整代码请登录后点击上方下载按钮下载查看