inakagawa/README.md

## README.md

      
    Raw
  

              README.md
            
          
    これはなにか

クリックすると引き出されるドロワー

  
## cssanim.css
/*cssanim.css*/

#drawer{
	width: 350px;
	height: 100%;
	color: white;
	left: -350px;
	overflow: auto;
	position: fixed;
	background: #333;
	transition: -webkit-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}
.move {
  -webkit-transform: translate3d(350px, 0, 0);
  transform: translate3d(350px, 0, 0);
}

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>css animation</title>
	<link rel="stylesheet" href="cssanim.css">
</head>
<body>
<div id="drawer">
	<ul>
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>
</div>
<div class="invoker">
	click here to invoke
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
	$('.invoker').on('click', function(){
		$('#drawer').addClass('move');
	});

</script>
</body>
</html>
	/cssanim.css/

	#drawer{
	width: 350px;
	height: 100%;
	color: white;
	left: -350px;
	overflow: auto;
	position: fixed;
	background: #333;
	transition: -webkit-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	}
	.move {
	-webkit-transform: translate3d(350px, 0, 0);
	transform: translate3d(350px, 0, 0);
	}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>css animation</title>
	<link rel="stylesheet" href="cssanim.css">
	</head>
	<body>
	<div id="drawer">
	<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	</ul>
	</div>
	<div class="invoker">
	click here to invoke
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	<script>
	$('.invoker').on('click', function(){
	$('#drawer').addClass('move');
	});

	</script>
	</body>
	</html>