<div class="buttonHamburger is-type03">
	<div class="buttonHamburger__line">
		<span class="line--top"></span>
		<span class="line--middle"></span>
		<span class="line--bottom"></span>
	<!-- /.buttonHamburger__line --></div>
<!-- /.buttonHamburger --></div>
                

.buttonHamburger {
	width: 3em;
	height: 3em;
	display: block;
	position: absolute;
	top:0;
	right:0;
  //右上に絶対配置
}
.buttonHamburger__line{
	width: 100%;
	height: 100%;
	cursor:pointer;
	display: block;
	background: #000;
	position: relative;
	>span {
	    width: 2em;
	    height: 1px;
	    display: block;
	    background: #FFF;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    margin-left: -1em; 
	}
}
.buttonHamburger.is-type03{
	// ハンバーガーメニュー 押す前
	span {
	    transition: all 0.5s;
	    transform: translateY(0px) !important;
	}
	.line--top {
		margin-top: -0.7em;
	    transform: rotate(0deg) !important;
	}
	.line--bottom {
		margin-top: 0.7em;
	    transform: rotate(0deg) !important;
	}

	// ハンバーガーメニュー hover
	&:hover {
	    .line--top {
			margin-top: -0.8em;
	    }
	    .line--bottom {
			margin-top: 0.8em;
	    }
	}

	// ハンバーガーメニュー 押した後の動き
	&.is-open {
	    .line--middle {
	    	background: rgba(255, 255, 255, 0);
	    }
		.line--top {
    		margin-top: 0px;
		    transform: rotate(-405deg) !important;
		}
		.line--bottom {
    		margin-top: 0px;
			transform: rotate(405deg) !important;
		}
	}
}
              

※ハンバーガーボタンを押すと「is-open」クラスが「buttonHamburger」クラスの要素に追加されるようJavascriptを記述する必要があります。
ハンバーガーメニューを作成する時は、モーダルウィンドウ等を組み合わせる必要があります。