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-.........完整代码请登录后点击上方下载按钮下载查看