body {
    margin: 0;
    background: url(/assets/img/bg.jpg);
}
.contents {
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#navTgl:checked ~ .contents {
    transform: translateX(-250px);/*左配置250px*/
}
 
/* :::::: toggle button :::::: */
#navTgl {
    display: none;
}
label {
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;/*左配置left*/
}
.open {
    z-index: 100;
    width: 48px;
    height: 48px;
    background: lightSeaGreen;
    transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before,
.open::after {
    content: "";
}
.open span,
.open::before,
.open::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 30%;
    width: 40%;
    border-bottom: 2px solid white;
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
    transform: translateY(-8px);
}
.open::after {
    transform: translateY(8px);
}
.close {
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: background .6s;
}
#navTgl:checked + .open {
    background: indianRed;
    transform: translateX(-250px);/*左配置250px*/
}
#navTgl:checked + .open span {
    transform: scaleX(0);
}
#navTgl:checked + .open::before {
    transform: rotate(45deg);
}
#navTgl:checked + .open::after {
    transform: rotate(-45deg);
}
#navTgl:checked ~ .close {
    pointer-events: auto;
    background: rgba(0,0,0,.3);
}
 
/* :::::: drawer menu :::::: */
.menu {
    z-index: 1;
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;/*左配置left*/
    width: 250px;
    height: 100%;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0,0,0,.6);
    transform: translateX(100%);/*左配置-100%*/
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu h2,
.menu a {
    color: white;
}
.menu h2 {
    text-align: center;
}
.menu ul {
    margin: 0;
    padding: 0;
}
.menu li {
    font-size: .8em;
    line-height: 1.4;
}
.menu li:not(:first-child) {
    border-top: 1px solid rgba(255,255,255,.6);
}
.menu a {
    display: block;
    padding: 1em 2em;
    text-decoration: inherit;
    transition: background .6s;
}
.menu a:hover {
    background: black;
}
#navTgl:checked ~ .menu {
    transform: none;
}
 

<input type="checkbox" id="navTgl">
<label for="navTgl" class="open"><span></span></label>
<label for="navTgl" class="close"></label>
<nav class="menu">
	
	<h2>menu</h2>
	<ul>
		<li><a href="#article1">menu1</a></li>
		<li><a href="#article2">menu2</a></li>
		<li><a href="#article3">menu3</a></li>
		<li><a href="#article4">menu4</a></li>
		<li><a href="#article5">menu5</a></li>
	</ul>
	
</nav>
 
<div class="contents">
	
</div>