<div class="body-inner">
    	<div class="overlay"></div>	
    	<aside class="menu">
    		<header class="header">
    			<div class="bg">
    				<div class="caption">
    					<div class="account-img"></div>
    					<div class="account-info flex">
    						<div>
    							<h3 class="caption-title-1">ツクログ</h3>
    							<p class="caption-title-2">@tsukulognet</p>
    						</div>
    						<div class="arrow"><i class="fa fa-caret-down color-white" aria-hidden="true"></i></div>
    					</div>
    				</div>
    			</div>
    		</header>
    		<ul class="menu-list">
    			<li class="menu-list-item icon icon-user icon-color-gray icon-m-r-2">プロフィール</li>
    			<li class="menu-list-item icon icon-clone icon-color-gray icon-m-r-2">ハイライト</li>
    			<li class="menu-list-item icon icon-bolt icon-color-gray icon-m-r-2">自分のモーメント</li>
    			<li class="menu-list-item icon icon-list icon-color-gray icon-m-r-2">リスト</li>
    			<li class="menu-list-item icon icon-user-plus icon-color-gray icon-m-r-2">おすすめユーザー</li>
    			<li class="menu-list-item flex icon icon-toggle-on icon-color-gray">夜間モード</li>
    			<li class="menu-list-item">QRコード</li>
    			<li class="menu-list-item">設定</li>
    			<li class="menu-list-item">ヘルプ</li>
    		</ul>
    	</aside>
    	<header class="global-header">
    		<div class="flex">
    			<h1 class="logo"></h1>
    			<div class="current-item-title">ホーム</div>
    			<button class="btn btn-search icon icon-search icon-color-sky"></button>
    		</div>
    
    	</header>
    	<nav class="global-nav">
    		<ul class="global-nav-list flex">
    			<li class="global-nav-list-item current-item"><button class="btn btn-home icon icon-home icon-color-gray"></button></li>
    			<li class="global-nav-list-item"><button class="btn btn-news icon icon-news icon-color-gray"></button></li>
    			<li class="global-nav-list-item"><button class="btn btn-bell icon icon-bell icon-color-gray"></button></li>
    			<li class="global-nav-list-item"><button class="btn btn-dm icon icon-dm icon-color-gray"></button></li>
    		</ul>
    	</nav>
    	<main class="content">
    		<ul class="tl">
    			<li class="card flex">
    				<aside class="thumbnail"></aside>
    				<div class="card-inner">
    					<div class="tweet-header flex">
    						<h3 class="user-name">ツクログ<span class="user-id color-gray-3">@tsukulognet</span></h3>
    						<time class="tweet-time color-gray-3">1分前</time>
    					</div>
    					<div class="tweet">
    						<p class="tweet-text">猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。</p>
    						<figure class="tweet-img"><img src="http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg" alt="ツイート画像" /></figure>
    					</div>
    					<footer class="tweet-footer">
    						<nav class="tweet-action flex">
    							<button class="btn reply icon icon-reply icon-sm icon-color-gray"></button>
    							<button class="btn retweet icon icon-retweet icon-sm icon-color-gray"></button>
    							<button class="btn love icon icon-heart icon-sm icon-color-gray"></button>
    							<button class="btn dm icon icon-dm icon-sm icon-color-gray"></button>
    						</nav>
    					</footer>
    				</div>
    			</li>
    			<li class="card flex">
    				<aside class="thumbnail"></aside>
    				<div class="card-inner">
    					<div class="tweet-header flex">
    						<h3 class="user-name">ツクログ<span class="user-id color-gray-3">@tsukulognet</span></h3>
    						<time class="tweet-time color-gray-3">1分前</time>
    					</div>
    					<div class="tweet">
    						<p class="tweet-text">猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。</p>
    						<figure class="tweet-img"><img src="http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg" alt="ツイート画像" /></figure>
    					</div>
    					<footer class="tweet-footer">
    						<nav class="tweet-action flex">
    							<button class="btn reply icon icon-reply icon-sm icon-color-gray"></button>
    							<button class="btn retweet icon icon-retweet icon-sm icon-color-gray"></button>
    							<button class="btn love icon icon-heart icon-sm icon-color-gray"></button>
    							<button class="btn dm icon icon-dm icon-sm icon-color-gray"></button>
    						</nav>
    					</footer>
    				</div>
    			</li>
    			<li class="card flex">
    				<aside class="thumbnail"></aside>
    				<div class="card-inner">
    					<div class="tweet-header flex">
    						<h3 class="user-name">ツクログ<span class="user-id color-gray-3">@tsukulognet</span></h3>
    						<time class="tweet-time color-gray-3">1分前</time>
    					</div>
    					<div class="tweet">
    						<p class="tweet-text">猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。</p>
    						<figure class="tweet-img"><img src="http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg" alt="ツイート画像" /></figure>
    					</div>
    					<footer class="tweet-footer">
    						<nav class="tweet-action flex">
    							<button class="btn reply icon icon-reply icon-sm icon-color-gray"></button>
    							<button class="btn retweet icon icon-retweet icon-sm icon-color-gray"></button>
    							<button class="btn love icon icon-heart icon-sm icon-color-gray"></button>
    							<button class="btn dm icon icon-dm icon-sm icon-color-gray"></button>
    						</nav>
    					</footer>
    				</div>
    			</li>
    			<li class="card flex">
    				<aside class="thumbnail"></aside>
    				<div class="card-inner">
    					<div class="tweet-header flex">
    						<h3 class="user-name">ツクログ<span class="user-id color-gray-3">@tsukulognet</span></h3>
    						<time class="tweet-time color-gray-3">1分前</time>
    					</div>
    					<div class="tweet">
    						<p class="tweet-text">猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。</p>
    						<figure class="tweet-img"><img src="http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg" alt="ツイート画像" /></figure>
    					</div>
    					<footer class="tweet-footer">
    						<nav class="tweet-action flex">
    							<button class="btn reply icon icon-reply icon-sm icon-color-gray"></button>
    							<button class="btn retweet icon icon-retweet icon-sm icon-color-gray"></button>
    							<button class="btn love icon icon-heart icon-sm icon-color-gray"></button>
    							<button class="btn dm icon icon-dm icon-sm icon-color-gray"></button>
    						</nav>
    					</footer>
    				</div>
    			</li>
    			<li class="card flex">
    				<aside class="thumbnail"></aside>
    				<div class="card-inner">
    					<div class="tweet-header flex">
    						<h3 class="user-name">ツクログ<span class="user-id color-gray-3">@tsukulognet</span></h3>
    						<time class="tweet-time color-gray-3">1分前</time>
    					</div>
    					<div class="tweet">
    						<p class="tweet-text">猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。</p>
    						<figure class="tweet-img"><img src="http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg" alt="ツイート画像" /></figure>
    					</div>
    					<footer class="tweet-footer">
    						<nav class="tweet-action flex">
    							<button class="btn reply icon icon-reply icon-sm icon-color-gray"></button>
    							<button class="btn retweet icon icon-retweet icon-sm icon-color-gray"></button>
    							<button class="btn love icon icon-heart icon-sm icon-color-gray"></button>
    							<button class="btn dm icon icon-dm icon-sm icon-color-gray"></button>
    						</nav>
    					</footer>
    				</div>
    			</li>
    			<li class="card flex">
    				<aside class="thumbnail"></aside>
    				<div class="card-inner">
    					<div class="tweet-header flex">
    						<h3 class="user-name">ツクログ<span class="user-id color-gray-3">@tsukulognet</span></h3>
    						<time class="tweet-time color-gray-3">1分前</time>
    					</div>
    					<div class="tweet">
    						<p class="tweet-text">猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。猫なう。</p>
    						<figure class="tweet-img"><img src="http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg" alt="ツイート画像" /></figure>
    					</div>
    					<footer class="tweet-footer">
    						<nav class="tweet-action flex">
    							<button class="btn reply icon icon-reply icon-sm icon-color-gray"></button>
    							<button class="btn retweet icon icon-retweet icon-sm icon-color-gray"></button>
    							<button class="btn love icon icon-heart icon-sm icon-color-gray"></button>
    							<button class="btn dm icon icon-dm icon-sm icon-color-gray"></button>
    						</nav>
    					</footer>
    				</div>
    			</li>
    		</ul>
    	</main>
    </div>
$gray-base:#333;
$gray-light-1:lighten($gray-base, 10%);
$gray-light-2:lighten($gray-base, 30%);
$gray-light-3:lighten($gray-base, 40%);
$gray-lighter:lighten($gray-base, 70%);
$gray-lightest:lighten($gray-base, 75%);
$white:lighten($gray-base, 80%);
$black:darken($gray-base, 20%);
$blue:#40AAEF;

* {
	box-sizing: border-box;
}

html {
	font-size: 4vw;
	@media all and (min-width: 768px) {
		font-size: 100%;
	}
}

body {
	background: $gray-lightest;
	color: $gray-light-1;
	font-family: "Noto Sans Japanese";
	height: 1000px;
	margin:0;
}

img {
	height: auto;
	max-width: 100%;
}
/* メニュー */

.menu {
	background: $white;
	height: 100%;
	position: fixed;
	left: -80%; //初めは画面左外へ隠す
	overflow-y: visible;
	width: 80%;
	z-index: 2000;
	-webkit-user-select: none; //要素の文字列や画像を選択できないように
	-webkit-overflow-scrolling: touch; //慣性スクロールを適用
	/* メニューの摘み */
	
	&::after {
		content: '';
		background-color:rgba(#333, .4);
		display: block;
		height: 100%;
		position: absolute;
		top: 0%;
		left: 100%;
		width: 20%;
	}
	
	&-list {
		background: $white;
		padding: 0.7rem 0;
		&-item {
			font-weight: 500;
			padding: 0.8rem 1.1rem;
			&:nth-child(5) {
				border-bottom: 1px solid $gray-lighter;
				padding-bottom: 1.4rem;
			}
			&:nth-child(6) {
				align-items: baseline;
				justify-content: space-between;
				padding-top: 1.4rem;
			}
		}
	}
}


/*メニューのすまみを削除するスタイル */

.change {
	&::after {
		content: '';
		display: none;
	}
}

.header {
	height: 12rem;
	//max-height: 300px;
}

.bg {
	background: url("http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg") no-repeat;
	background-size: cover;
	height: 100%;
	position: relative;
	&::before {
		background: rgba($black, 0.4);
		content: '';
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
}

.caption {
	padding: 1.1rem;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	&-title {
		&-1 {
			color: $gray-lightest;
			font-size: 1rem;
			margin: 0;
			margin-bottom: 0.4rem;
		}
		&-2 {
			color: $gray-lighter;
			font-size: 0.8rem;
			margin: 0;
		}
	}
}

.color {
	&-white {
		color: $white;
	}
	&-gray {
		&-2 {
			color: $gray-light-2;
		}
		&-3 {
			color: $gray-light-3;
		}
	}
}

.account {
	&-img {
		background: url("http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg") no-repeat;
		background-size: cover;
		border-radius: 50%;
		height: 4rem;
		margin-bottom: 1.2rem;
		width: 4rem;
	}
	&-info {
		align-items: center;
		justify-content: space-between;
	}
}

.overlay {
	background: rgba($gray-base, 0.7);
	opacity: 0; //初めは透明に
	position:fixed;
	top: 0;
	left: 0;
	right:0;
	bottom:0;
	visibility: hidden; //初めは非表示。display:none;ではtransitionが効かない。
	z-index: 1;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icon {
	&::before,
	&::after {
		font-family: "FontAwesome";
		font-size: 1.4rem;
		display: inline-block;
		width: 1.4rem;
	}
	&-color {
		&-gray {
			&::before,
			&::after {
				color: $gray-light-2;
			}
		}
		&-white {
			&::before,
			&::after {
				color: $white;
			}
		}
		&-sky {
			&::before,
			&::after {
				color: $blue;
			}
		}
	}
	&-m {
		&-r {
			&-2 {
				&::before,
				&::after {
					margin-right: 2rem;
				}
			}
		}
	}
	&-user {
		&::before {
			content: '\f007';
		}
		&-plus {
			&::before {
				content: '\f234';
			}
		}
	}
	&-list {
		&::before {
			content: '\f03a';
		}
	}
	&-clone {
		&::before {
			content: '\f24d';
		}
	}
	&-bolt {
		&::before {
			content: '\f0e7';
		}
	}
	&-toggle-on {
		&::after {
			content: '\f205';
		}
	}
	&-down {
		&::before {
			content: '\f0d7';
			width: 0;
		}
	}
	&-search {
		&::before {
			content: '\f002';
		}
	}
	&-home {
		&::before {
			content: '\f015';
		}
	}
	&-news {
		&::before {
			content: '\f1ea';
		}
	}
	&-bell {
		&::before {
			content: '\f0f3';
			transform: rotate(30deg);
		}
	}
	&-dm {
		&::before {
			content: '\f0e0';
		}
	}
	&-reply {
		&::before {
			content: '\f112';
		}
	}
	&-retweet {
		&::before {
			content: '\f079';
		}
	}
	&-heart {
		&::before {
			content: '\f004';
		}
	}
	&-sm {
		&::before {
			font-size: 1rem;
		}
	}
}

.flex {
	display: flex;
}


/* タイムラインのスタイル */

.global-header {
	background: $white;
	width: 100%;
	>div {
		align-items: center;
		padding: 0.8rem;
	}
}

.logo {
	background: url("http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg") no-repeat;
	background-size: cover;
	border-radius: 50%;
	height: 2rem;
	margin: 0;
	width: 2rem;
}

.current-item {
	border-bottom: 0.2rem solid $blue;
	&-title {
		margin-left: 1.5rem;
		margin-right: auto;
	}
}

button {
	background: none;
	border: none;
	outline: none;
}

.global-nav {
	background: $white;
	border-bottom: 1px solid $gray-lighter;
	position: sticky;
	top: 0;
	&-list {
		&-item {
			flex: 1;
			padding: 0.6rem 0;
			text-align: center;
		}
	}
}

.card {
	background: $white;
	border-top: 1px solid $gray-lighter;
	padding: 1rem 0.6rem;
	&-inner {
		flex: 1;
		padding: 0 0.6rem;
	}
	>.thumbnail {
		background: url("http://tsukulog.net/wp-content/uploads/2015/11/bsHIR96_boxneko.jpg") no-repeat;
		background-size: cover;
		border-radius: 6px;
		height: 4rem;
		width: 4rem;
	}
}

.user {
	&-name {
		margin: 0;
	}
	&-id {
		font-size: 1rem;
		font-weight: normal;
		margin-left: 0.5rem;
	}
}

.tweet {
	&-header {
		justify-content: space-between;
	}
	&-text {
		margin: 0.3rem 0;
	}
	&-img {
		border-radius: 5px;
		margin: 1rem 0;
		overflow: hidden;
	}
	&-action {
		>.btn {
			margin-right: 1.8rem;
		}
	}
}
View Compiled
(() => {
	class Menu {
		//メニュー.menu要素の参照
		private _elem: HTMLElement = document.querySelector('.menu');

		//メニューのborderの幅
		private _clientLeft: number = this._elem.clientLeft;
		private _clientTop: number = this._elem.clientTop;

		//閉じたメニューの親要素の左端からの相対x座標
		private _offsetLeft: number = this._elem.offsetLeft;
		private _offsetTop: number = this._elem.offsetTop;

		//開いたメニューの親要素の左端からの相対x座標
		private _openOffsetLeft: number = null;

		//メニューの幅
		private _width: number = this._elem.clientWidth;

		constructor() {
			//ウィンドウに対してresizeイベントが発生するとresizeメソッドが実行されるようにする
			window.addEventListener('resize', (e) => this.resize(e));
		}

		//他のクラスから参照するためにgetterで定義
		get elem() {
			return this._elem;
		}
		get offsetLeft() {
			return this._offsetLeft;
		}
		get offsetTop() {
			return this._offsetTop;
		}
		get openOffsetLeft() {
			return this._openOffsetLeft;
		}
		set openOffsetLeft(value) {
			this._openOffsetLeft = value;
		}
		get clientLeft() {
			return this._clientLeft;
		}
		get clientTop() {
			return this._clientTop;
		}

		//ウィンドウのリサイズ時にメニューの幅を更新する
		set width(value) {
			this._width = value;
		}
		get width() {
			return this._width;
		}

		//オーバーレイがクリックされたときにメニューをフェードアウトするメソッド
		public fadeOut() {
			//メニューを0.5sかけてフェードアウトさせる
			this._elem.style.left = '';
			this._elem.style.transform = '';
			this._elem.style.transition = 'transform, left 0.5s ease';

			//フェードアウト後にresetメソッドを実行
			setTimeout(() => this.reset(), 500);
		}

		//フェードアウト後にメニューに追加されていたクラスやスタイルを全て削除するメソッド
		public reset() {
			this._elem.classList.remove('open');

			//ツマミを表示
			this._elem.classList.remove('change');
			this._elem.removeAttribute('style');
		}

		//ウィンドウのリサイズ毎にメニューの幅を再取得するメソッド
		private resize(e) {
			this.width = this._elem.clientWidth;
		}
	}

	const menu = new Menu;
	
	class Overlay {
		//.overlay要素の参照を取得
		private _elem: HTMLElement = document.querySelector('.overlay');
		constructor() {	
			//オーバーレイがクリックされたときにオーバーレイとメニューがフェードアウトするようにする
			this._elem.addEventListener('click', (e) => {
				this.fadeOut();
				menu.fadeOut();
			});	
		}
		get elem() {
			return this._elem;
		}

		//オーバーレイをフェードアウトするメソッド
		public fadeOut() {
			//オーバーレイを0.5sかけてフェードアウトさせる
			this._elem.style.opacity = '';
			this._elem.style.transition = "opacity 0.5s ease";

			//フェードアウト後にresetメソッドを実行
			setTimeout(() => this.reset(), 500);
		}

		//オーバーレイとbodyに追加されていたスタイルを削除
		public reset() {
			this._elem.removeAttribute('style');
			document.body.removeAttribute('style');
		}
	}

	const overlay = new Overlay;
	
	class Pointer {
		
		//.menuをタッチしたときの指の座標
		private dx: number = 0;
		private dy: number = 0;

		//タッチしたまま動かしているときの指の座標
		private mx: number = 0;
		private my: number = 0;

		//dx(dy)からmx(my)までの距離
		private distanceX: number = 0;
		private distanceY: number = 0;

		//ドラッグしているかどうか
		public static isDragging: boolean = false;

		//distanceXとdistanceYからなるラジアン
		private radian: number;

		//ラジアンから変換された角度
		private deg: number;
		private start: number;
		private progress: number;

		//縦スクロールしているかどうか
		private isScrolling: boolean = false;

		//横スライドしているかどうか
		private isSliding: boolean = false;

		constructor() {

			//ドラッグ処理
			menu.elem.addEventListener('touchstart', (e) => this.down(e));

			//menu.elemにするとデスクトップではドラッグできなかった
			document.body.addEventListener('touchmove', (e) => this.move(e));
			document.body.addEventListener('touchend', (e) => this.up(e));
			document.body.addEventListener('touchleave', (e) => this.up(e));

			/*
			menu.elem.addEventListener('mousedown', (e) => this.down(e));
			document.body.addEventListener('mousemove', (e) => this.move(e));
			document.body.addEventListener('mouseup', (e) => this.up(e));
			document.body.addEventListener('mouseleave', (e) => this.up(e));
			*/
		}

		//メニューをタッチしたときに実行されるメソッド
		private down(e) {

			//タッチ・マウスイベントの差異を吸収
			let event;
			if(e.type === "mousedown") {
				event = e;
			}else {
				event = e.changedTouches[0];
			}
			this.start = +new Date();

			//.menuをタッチしたときの指の座標を取得
			this.dx = event.pageX;
			this.dy = event.pageY;

			//ドラッグ開始
			Pointer.isDragging = true;
		}

		//タッチしたまま指を動かしたときに実行されるメソッド
		private move(e) {

			//スムーズにメニューがスライドされるようにスクロールイベントを無効
			this.on_event();			

			const now = +new Date();
			this.progress = now - this.start;

			//ドラッグを開始しているときのみ実行
			if(Pointer.isDragging) {
				console.log(`move中!!!!!!!!`);
				//タッチ・マウスイベントの差異を吸収
				let event;
				if(e.type === "mousemove") {
					event = e;
				} else {
					event = e.changedTouches[0];
				}

				//タッチしたまま動かしているときの指の座標
				this.mx = event.pageX;
				this.my = event.pageY;

				//dx(dy)からmx(my)までの距離
				this.distanceX = this.mx - this.dx;
				this.distanceY = this.my - this.dy;

				//メニューが開いているときの処理
				if(menu.elem.classList.contains('open')) {

					//distanceXとdistanceYからなるラジアン
					this.radian = Math.atan2(-this.distanceY, this.distanceX);
					this.deg = Math.abs(Math.floor(this.radian * 180 / Math.PI));

					//縦スクロールしていないときのみ実行される
					if(!this.isScrolling) {

						//水平方向にスライドされたとき
						if(this.deg > 135 && this.deg <= 180 || this.deg > 0 && this.deg < 45){
							//スムーズにメニューがスライドされるようにスクロールイベントを無効
							this.on_event();

							//縦スクロールではない
							this.isScrolling = false;

							//横スライドした
							this.isSliding = true;
						}
					}

					//横スクロールしていないときのみ実行
					if(!this.isSliding) {

						//縦スクロールされたとき
						if(this.deg >= 45 && this.deg <= 135) {

							//スクロールイベントの無効を解除
							this.off_event();

							//横スライドではない
							this.isSliding = false;

							//縦スクロールした
							this.isScrolling = true;
						}
					}

					console.log(`scrolling: ${this.isScrolling}`);
					console.log(`sliding: ${this.isSliding}`);

					//縦スクロールであればmoveメソッドを抜ける
					if(this.isScrolling) {
						return;
					}

					//横スライドであればdistancecXの変化に応じてメニューとオーバーレイを制御

					//distanceXの変化に合わせてメニューが左方向へ動くようにする
					menu.elem.style.transform = `translate3d(${Pointer.clamp(this.distanceX, menu.offsetLeft, menu.openOffsetLeft)}px, 0, 0)`;

					//opacityをメニューが閉じるまでに1~0に変化するようにする
					overlay.elem.style.opacity = `${1 - Math.abs(this.distanceX) / menu.width}`;

					//メニューが開いているときに更に右へスライドされたときにオーバーレイの変化を防ぐ
					if(this.distanceX > 0) {
						overlay.elem.style.opacity = `${1}`;
					}

				//閉じているメニューをドラッグしたときの処理
				}else{
					//メニューの引き出しに応じてオーバーレイをフェードイン
					//スクロールイベントを無効
					e.preventDefault();

					//メニューのスクロールバーを表示
					menu.elem.style.overflowY = 'auto';

					//distanceXの変化に合わせてメニューが右方向へ動くようにする
					menu.elem.style.transform = `translate3d(${Pointer.clamp(this.distanceX, menu.clientLeft, menu.clientLeft + menu.width)}px ,0,0)`;

					//メニューが開き切るまでの間にopacityを0~1に変化させる
					overlay.elem.style.opacity = `${Pointer.clamp(this.distanceX / menu.width, menu.clientLeft, menu.clientLeft + menu.width)}`;

					//オーバーレイを表示
					overlay.elem.style.visibility = 'visible';
				}
			}
		}

		//指を離したときに実行される
		private up(e) {
			console.log(e.target);	
			console.log(`up!!!!!!!!!!1`);
			console.log(`ディスタンス: ${Math.abs(Math.floor(this.distanceX))}`);
			//ドラッグ中のみ実行される
			if(Pointer.isDragging) {
				//ドロップした
				Pointer.isDragging = false;

				//スクロールイベントの無効を解除
				this.off_event();			

				//開いているメニューから指を離したとき
				if(menu.elem.classList.contains('open')) {
					console.log(`openup`);
					//縦スクロール中に横スライドが発生してもメニューは閉じないようにする
					if(!this.isScrolling) {
						//メニューを閉じるのに十分な移動量でなければ
						if(this.distanceX >= -(menu.clientLeft + menu.width * .5)) {
							//メニューは閉じない
							menu.elem.style.transform = ``;
							overlay.elem.style.opacity = `${1}`;
						//十分であれば
						}else {
							//メニューを閉じる
							document.body.removeAttribute('style');
							menu.elem.removeAttribute('style');
							overlay.elem.removeAttribute('style');
							menu.elem.classList.remove('open');
							menu.elem.classList.remove('change');
						}		
					}
				//閉じていたメニューから指を離したとき
				}else {
					console.log(`uuuuuuuuup`);
					//メニューが開くのに十分な移動量でなければ
					if(this.distanceX <= menu.clientLeft + menu.width * .5) {

						//メニューを閉じる
						menu.elem.removeAttribute('style');

						//オーバーレイを非表示
						overlay.elem.removeAttribute('style');
					//十分な移動量であれば
					}else {
						//メニューを開く
						document.body.style.overflow = `hidden`;
						menu.elem.style.transform = ``;
						menu.elem.style.left = `${0}px`;
						menu.openOffsetLeft = menu.elem.offsetLeft

						//オーバーレイを表示
						overlay.elem.style.visibility = 'visible';
						overlay.elem.style.opacity = `${1}`;
						menu.elem.classList.add('open');
						menu.elem.classList.add('change');
					}
				}

				//リセット
				this.isSliding = false;
				this.isScrolling = false;

				//メニューを閉じた後にツマミをクリックしただけで開かないように
				this.distanceX = 0;
				this.distanceY = 0;
				console.log(`isSliding: ${this.isSliding}`);
				console.log(`isScrolling: ${this.isScrolling}`);
			}
		}
		//distanceXを制御するためのユーティリティメソッド
		private static clamp(number, min, max) {
			return Math.max(min, Math.min(number, max));
		}
		//スクロールイベントを無効にするメソッド
		private on_event() {
			document.body.addEventListener('mousemove', this.myHandler, false);
			document.body.addEventListener('touchmove', this.myHandler, false);
		}
		//スクロールイベントの無効を解除するメソッド
		private off_event() {
			document.body.removeEventListener('mousemove', this.myHandler, false);
			document.body.removeEventListener('touchmove', this.myHandler, false);
		}
		//何度も呼ばれるためメソッドにしている
		private myHandler(e){
			e.preventDefault();
		}
	}
	
	const pointer = new Pointer;
})();
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.